Comment append une info-bulle twitter bootstrap à une icône

J’appendais une info-bulle droite de twitter bootstrap à un élément icône.

Le code est le suivant:

Sensors Permissions

Je voudrais que, lorsque le curseur est sur l’icône, une infobulle avec des informations s’affiche

Comment puis-je faire? Il ne suffit pas d’inclure la librairie tooltip.js et de mettre un élément dans le code de l’icône? Je suis confus.

Je vous remercie.

Je l’ai récemment utilisé comme ceci:

   

Qui produit:

entrer la description de l'image ici

Vous définissez le positionnement de l’info-bulle et d’autres fonctionnalités (délais, etc.) en le déclarant à l’aide de js:

 $(document).ready(function(){ $("[rel=tooltip]").tooltip({ placement: 'right'}); }); 

Comme mentionné dans les commentaires, vous pouvez trouver d’autres atsortingbuts / options ici .

Vous oubliez peut-être d’initialiser vos info-bulles avec .tooltip() .

La fonction .tooltip() doit être appelée sur chaque élément que vous souhaitez avoir un écouteur d’infobulle. Ceci est à des fins de performance. Vous pouvez initialiser un groupe à la fois en appelant la fonction sur un parent, comme ceci: $('.tooltip-group').tooltip()

Affichez la fonction d’initialisation sur un élément sur JSFiddle.

Javascript

 $(document).ready(function() { $('#example').tooltip(); }); 

Balisage

 

Sensors Permissions

@ nickhar’s answer, en utilisant data-toggle="tooltip" testé avec Bootstrap 2.3.2 et 3.0:

   

Qui produit:

entrer la description de l'image ici

Vous définissez le positionnement de l’info-bulle et d’autres fonctionnalités (délais, etc.) en le déclarant à l’aide de js:

 $(document).ready(function(){ $("[data-toggle=tooltip]").tooltip({ placement: 'right'}); }); 

Comme mentionné dans les commentaires, vous pouvez trouver d’autres atsortingbuts / options ici .

en javascript

 $(function () { $(".has-tooltip-right").tooltip({ placement: 'right'}); $(".has-tooltip-left").tooltip({ placement: 'left'}); $(".has-tooltip-bottom").tooltip({ placement: 'bottom'}); $(".has-tooltip").tooltip(); }); 

en html

 This link and that link