Comment créer des infosbulles tooltip avec le Framework BootStrap 3

Apprenez à créer des infobulles très simplement avec le framework BootStrap 3.

Vous pourrez ajouter du code HTML dans vos infobulles, afficher une image ou encore les animer.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment créer des infosbulles tooltip avec le Framework BootStrap 3

Bonjour à tous et bienvenu sur Développement Facile.

Dans ce nouveau cours vous allez apprendre à créer des infobulles avec le framework BootStrap 3. Avec une classe CSS, quand vous aurez un paragraphe de texte, votre souris passera au-dessus d’un lien et ça va vous afficher une bulle d’information.

Les infobulles

On va voir les différentes options que BootStrap 3 propose, ça s’appelle soit une infobulle, soit un tooltip, ça dépend du terme dont vous avez l’habitude d’utiliser. Pour créer une infobulle, il faut utiliser la balise a href pour les liens avec l’attribut data-toggle=tooltip, vous utilisez data-toggle=tooltip et ça fait que le texte de l’infobulle est mis dans l’attribut title, et le texte va s’afficher quand vous passerez la souris au-dessus du lien. Il est nécessaire d’initialiser l’infobulle avec l’API JavaScript de BootStrap 3, onmouseover $1.infobulle texte, c’est l’identifiant de votre infobulle bien évidemment, vous faites $div sur votre identifiant d’infobulle, 1.tooltip, vous appelez la méthode tooltip avec le paramètre show. Ce qui donne, vous avez un exemple de code source a href la classe infobulle-texte data-toggle tooltip pour dire que c’est un tooltip, title bienvenu sur développement facile c’est le texte de l’infobulle, et lorum ispum c’est le lien.

Quand l’utilisateur passe au-dessus de lorem ipsum, il y a une petite infobulle noire qui dit, bienvenu sur développement facile.

Les infobulles – les options

Par défaut l’infobulle s’affiche avec un effet de fondu et elle disparait aussi avec un effet de fondu.

Vous pouvez supprimer cet effet si vous ne le souhaitez pas, il suffit de mettre l’attribut data-animation à la valeur false, tout simplement. Vous avez l’attribut data-HTML qui vous permet d’insérer du contenu HTML dans l’infobulle, des images par exemple, mettre le texte en gras, en italique, il suffit de mettre l’attribut data-HTML=true, puis vous pouvez ajouter des balises HTML dans l’attribut title.

Vous avez également l’attribut data-placement, ça va permette de déterminer la position de votre infobulle, vous avez votre texte ici, vous pouvez positionner votre infobulle en bas avec bottom, en haut avec top, à droite avec right, et left à gauche avec data-placement=left.

Il suffit de renseigner cette valeur, sinon vous laissez la valeur par défaut, la valeur par défaut c’est top au-dessus du lien.

Après c’est à vous de voir en fonction de vos préférences, vous avez également l’attribut data-title, c’est l’équivalent de title, selon vos préférences vous allez peut-être utiliser l’attribut title pour mettre des textes dans l’infobulle ou alors l’attribut data-title pour mettre le texte de l’infobulle, après c’est vous qui choisissez en fonction de ce que vous préférez, tout simplement.

Et vous avez l’attribut data-trigger, ça permet de choisir les événements qui vont déclencher l’apparition de la bulle. Vous pouvez déclencher l’apparition de la bulle sur un over, sur un clic, sur un focus, ou manuel, grâce à cet attribut data-trigger, vous allez choisir les éléments pour déclencher l’apparition de cette infobulle.

Je vous ai mis un exemple d’apparition de l’infobulle avec le clic, data-trigger=click, l’utilisateur doit  cliquer sur le lien pour faire apparaître l’infobulle.

Les infobulles – l’API JavaScript

Bien évidemment pour manipuler le tooltip il y a une API JavaScript, vous pouvez afficher l’infobulle avez .tooltip, $ c’est l’identifiant de votre infobulle.tooltip show, .hide pour masquer l’infobulle, et vous pouvez faire un effet de toggle, clic pour afficher l’infobulle, clic pour la re masquer, il suffit d’appeler point la méthode tooltip avec toggle, tout simplement.

Exemple d’application

Je vous montre ça à travers un exemple de code source, alors vous avez, infobulle texte, c’est comme ça qu’elle s’appelle, mouseover dès que la souris passe au-dessus, on affiche l’infobulle, vous pouvez faire sur le clic également, après je vous ai mis le code, c’est vous qui choisissez.

Le carrousel on en a plus besoin, toujours un container, et donc vous avez du texte avec les différentes infobulles, donc là, l’infobulle ce sera sur le clic pour celle-là, après vous avez d’autres infobulles avec les différentes options data-animation, l’animation sera désactivée, ce qui donne ça, là je clic pour la faire disparaître, apparaître, sinon elle reste visible, je clic pour la faire disparaître, l’infobulle normale avec le petit effet et là l’infobulle sans effet, elle apparaît beaucoup plus brusquement, je ne sais pas si vous allez le percevoir à la vidéo qu’elle apparaît beaucoup plus brusquement, de toute façon je vous encourage à reprendre le code source pour justement mettre en pratique de votre côté dans vos applications web.

Les infobulles c’est vraiment très simple à utiliser, data-toggle tooltip, le trigger c’est optionnel et sinon vous pouvez utiliser data-title si vous préférez, voilà, data-title et vous pouvez mettre du contenu HTML avec data-HTML à true, formation en gras, Développement Facile en italique.

Votre plan d’actions !

Maintenant c’est à vous de jouer, sous cette vidéo vous allez retrouver le code source qui a été utilisé pour ce cours, vous pouvez le reprendre et l’implémenter dans vos applications web qui seront compatibles avec les smartphones, les tablettes, les ordinateurs de bureau, si vous avez des questions posez les directement sous ce cours, et moi je vous invite à consulter la deuxième vidéo, à la fin de cette vidéo il y a un lien qui va s’afficher, la vidéo va se transformer en lien, il suffira de cliquer sur la vidéo, sur le lien et ça va vous rediriger vers la deuxième vidéo, dans la deuxième vidéo vous irez plus loin avec le framework BootStrap 3, HTML 5, CSS 3, vous allez voir tout ça de long en large en travers avec une multitude d’exemples, je vous dis à tout de suite dans la deuxième vidéo.

[/ppmtoggle] [/ppmaccordion]

Télécharger l’exemple d’infobulles

Retrouvez le code source commenté pour ajouter des infobulles sur votre site Web

Utilisez vous les infobulles dans vos sites Internet ?

Utilisez  la zone commentaire pour partager votre avis sur les infobulles.