Les tooltips Bootstrap 3

Les tooltips sont les infobulles les plus basiques proposées par Bootstrap 3.  Sont afichées lorsque l’utilisateur survole un élément HTML avec sa souris, une petite fenêtre noire contenant du texte apparaît.

Créer un tooltip/infobulle avec Bootstrap3

Pour créer un tooltip, nous utiliserons la balise <a>, que nous enrichirons de l’attribut suivant: data-toggle=”tooltip”. Le texte qui composera le tooltip sera stocké dans l’attribut title=””. Pour initialiser le tooltip, il convient d’utiliser la fonction tooltip() de l’API JavaScript de Bootstrap 3.

Nous allons maintenant créer nos premières infobulles sous forme de tooltips :

Explication du code :

L’infobulle est déclarée à l’aide d’une balise <a> dans laquelle nous ajoutons les attributs data-toggle=”tooltip” (qui permet à Bootstrap 3 de mettre en forme le tooltip) et title=”” (sa valeur  constitue le texte qui sera affiché dans l’infobulle).

Le script ci-dessus permet d’initialiser les tooltips de la page (lisez les commentaires de chaque ligne du code)

Visionnons la page ainsi créée :

Lors du survol de l’élément, une infobulle simple contenant le texte “Et une troisième infobulle!” s’affiche. Nous venons de créer nos premiers tooltips.

Manipuler les tooltips avec l’API Bootstrap 3

Les attributs :

Attribut “data-animation”

Par défaut, le tooltip s’affiche et disparaît par un effet de fondu rendu possible grâce aux fonctions fadeIn() et fadeOut() de jQuery. Pour supprimer cet effet, il convient de donner la valeur “false” à l’attribut “data-animation” :*

 

Laisser un commentaire