Ajouter une infobulle sur un texte en HTML - pour thèmes Bootstrap

Un popover est le nom donné aux boîtes d'informations - à la façon des infobulles par exemple. Il est possible d'ajouter des popovers en Javascript avec les thèmes responsive Bootstrap proposés sur e-monsite. Les tooltips sont des infobulles plus simples.

Nous allons voir comment ajouter des popovers complets (avec titre et contenu) et des tooltips simples.

Ajouter des popovers sur votre thème responsive Bootstrap

Le code Javascript pour créer des popovers

Le script est à insérer dans la section "Scripts javascripts supplémentaires" des zones éditables du site (Configuration, Réglages, Zones éditables).

Voici le code à ajouter dans cette section.

Pour les utilisateurs d'autres plateformes qu' e-monsite, le code est à ajouter dans le head de la page (dans votre fichier js par exemple) et à encadrer par <script> </script>.

$(function () {
  $('[data-toggle="popover"]').popover()
})

Insérer un popover Bootstrap "simple" sur un bouton

Exemple de résultat pour un bouton cliquable - cliquez une fois pour afficher le contenu puis cliquez une seconde fois sur le bouton pour désactiver l'affichage du popover. Le code dans la colonne de droite est à coller dans un éditeur HTML.

 

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Titre dans le popover" data-content="Texte du bouton">Titre du bouton</button>

Insérer un popover Bootstrap "amélioré" sur un bouton

Exemple de résultat pour un bouton cliquable - cliquez une fois pour afficher le contenu puis cliquez une seconde fois n'importe où sur la page pour désactiver l'affichage du popover. Le code dans la colonne de droite est à coller dans un éditeur HTML.

 

Texte du bouton

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Titre dans le popover" data-content="Contenu dans le popover.">Texte du bouton</a>

Insérer un popover Bootstrap sur un texte

Comme une infobulle, il est possible de créer le popover sur un texte. Le code dans la colonne de droite est à coller dans un éditeur HTML.

Popover sur le haut  - Popover sur le côté droit - Popover sur le bas - Popover sur la gauche

Modifier la mention data-placement="top" pour changer la position du popover :

  • data-placement="top" : en haut
  • data-placement="bottom": en bas
  • data-placement="left": à gauche
  • data-placement="right": à droite

Voici les codes

<span> <a title="Titre dans le popover" tabindex="0" data-placement="top" data-toggle="popover" data-trigger="focus" data-content="Contenu dans le popover.">Popover sur le haut</a></span>

 

Modification du CSS pour la couleur de la popover et de son texte

La modification du CSS pour modifier l'apparence de la popover est à réaliser dans Configuration, Réglages, Zones éditables et dans la partie Styles CSS supplémentaires.

Vous pourrez modifier la couleur du texte avec : color: #code couleur; , la couleur du fond avec background-color: #code couleur, etc.

Voici un exemple de codes CSS à indiquer :

/* Code CSS popover */
/* popover-title est à modifier pour le titre de la popover */
.popover-title {
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: 5px 5px 0 0;
color: #000000;
font-size: 14px;
font-weight: normal;
line-height: 18px;
margin: 0;
padding: 8px 14px;
}
/* popover-content est à modifier pour le contenu de la popover */
.popover-content {
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: 5px 5px 0 0;
color: #000000;
font-size: 14px;
font-weight: normal;
line-height: 18px;
margin: 0;
padding: 8px 14px;
}

Attention Le code est déjà intégré à votre site. Il est placé ici pour exemple, si vous souhaitez modifier la présentation de base.

Le comportement par défaut du popover est de centrer horizontalement et verticalement celle-ci. Ajoutez "white-space: nowrap;" pour éviter ce comportement.
Si vous ne mettez pas de contenu dans les popovers, elles ne seront pas affichées.

Ajouter des tooltips sur votre thème responsive Bootstrap

Les tooltips sont des infobulles plus simples que les popovers, sans titre pour le contenu. De plus, nous avons vu que pour les popovers, il faut appeler celle-ci via un clic. Les tooltips sont elles affichées au passage de la souris.

Le code Javascript pour créer des Tooltips

Le script est à insérer dans la section "Scripts javascripts supplémentaires" des zones éditables du site (Configuration, Réglages, Zones éditables), comme pour le script pour les popovers.

Pour les utilisateurs d'autres plateformes qu' e-monsite, le code est à ajouter dans le head de la page (dans votre fichier js par exemple) et à encadrer par <script> </script>

 $(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Le code HTML pour insérer les tooltips :

 

Ajouter une tooltips sur un bouton

<button class="btn btn-default" title="Tooltip avec affichage à droite" type="button" data-toggle="tooltip" data-placement="right">Tooltips sur la droite</button>

 

Ajouter une tooltips sur un lien

Tooltips en haut 

<p><a title="Tooltip avec affichage en haut" data-toggle="tooltip" data-placement="top">Tooltips en haut</a></p>

Le titre "title" est donc le contenu présent dans la tooltip. Comme pour les popovers, modifiez data-placement="top" pour avoir un affichage à gauche (data-placement="left"), en bas (data-placement="bottom") ou à droite (data-placement="right").

Les options pour les tooltips et popovers du thème Bootstrap.

Des options sont possibles pour l'affichage de ces popovers ou tooltips.

Consultez cette page pour en savoir plus :

http://getbootstrap.com/javascript/#popovers

http://getbootstrap.com/javascript/#tooltips


Pour toute demande de personnalisation

Contactez-moi

Forum e-monsite

astuces-responsive
Utilisez les class embarquées de Bootstrap

e-monsite utilise le code de Bootstrap pour ses thèmes responsive (comme Twitter par ex). Découvrez quelques codes CSS sympas pour enjoliver vos contenus.

astuces-responsive
Astuces responsive design avec Bootstrap

Créer un site avec un design responsive permet de visualiser le site sur tout équipement. Il faut repenser la navigation pour les utilisateurs aux petits écrans.

astuces-responsive
Les glyphicons

Les Glyphicons sont embarqués directement dans votre thème Bootstrap. Voyons comment les utiliser sur un site créé sur e-monsite.

les-icones
Les icones de Zurb | Foundation Icon Fonts

Ajouter une galerie de 283 icones Zurb Foundation sur votre site. Les icones sont en vectoriels et peuvent être modifiés en langage CSS.

astuces-responsive
Ajouter un montrer-cacher, un spoiler sur Bootstrap

Il peut-être utile de créer des montrer/cacher, aussi appelés "spoiler" en anglais. Red Fish Web Syndrome vous détaille les possibilités avec Bootstrap.

cas-pratiques
Ajouter une infobulle sur un texte en HTML - pour thèmes Bootstrap

Il est possible d'ajouter des infobules : popovers en Javascript avec les thèmes Bootstrap proposés sur e-monsite. Les tooltips sont plus simples.

Commentaires (5)

vision-plaisir
  • 1. vision-plaisir (site web) | 15/02/2017
Merci beaucoup ce site bien réalisé et très constructible. Clair ! précis ! agréable ! DONC JE PARTAGE .Merci beaucoup
hoscar
Bonjour,
Il est possible que vous ne soyez pas passé par l'outil Source de l'éditeur visuel. Il faut cliquer sur Source puis coller le code HTML, sinon il est affiché comme si c'était du texte.
Bensoula
Bonjour,
J'ai suivi vos indications copier coller pour les "bulles infos" dans mes pages HTLM mais je n'ai que des lignes de codes !
à votre avis d'ou vient mon erreur ? pourriez vous m'aider à comprendre s'il vous plaît . par avance merci
Bien à vous . Majid
hoscar
Merci Maxime ;)
Les fonctionnalités de Boostrap sont vraiment super chouettes et assez faciles à mettre en place.
Maxime
  • 5. Maxime | 15/03/2015
Génial ce tuto !

Ajouter un commentaire