Comment ajouter une infobulle twitter bootstrap à une icône

Question

Je voudrais ajouter une info-bulle droite de twitter bootstrap à un élément d'icône.

Le code est le suivant :

<h3>Sensors Permissions <i class="icon-info-sign"></i></h3>

Je voudrais que, lorsque le curseur est sur l'icône, une info-bulle soit affichée à droite avec quelques informations...

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.

Merci.

Answer 1

Je l'ai récemment utilisé comme ça :

 <i class="icon-ok-sign" rel="tooltip" title="Key active" id="blah"></i>

Ce qui produit :

Vous définissez le positionnement de l'infobulle et d'autres caractéristiques (délais, etc.) en les déclarant à l'aide de js :

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

Comme mentionné dans les commentaires, vous pouvez trouver d'autres attributs/options aquí .

Answer 2

Vous avez peut-être oublié d'initialiser vos info-bulles avec .tooltip() .

El .tooltip() doit être appelée sur chaque élément pour lequel vous voulez avoir un écouteur d'infobulle. Ceci est pour des raisons de performance. Vous pouvez en initialiser plusieurs en même temps en appelant la fonction sur un parent, comme ceci : $('.tooltip-group').tooltip()

Visualisez la fonction d'initialisation sur un élément sur JSFiddle.

Javascript

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

Balisage

<h3>
  Sensors Permissions
  <i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i>
</h3>

Answer 3

La réponse de @nickhar, en utilisant data-toggle="tooltip" testé avec Bootstrap 2.3.2 et 3.0 :

 <i class="icon-ok-sign" data-toggle="tooltip" title="Key active" id="blah"></i>

Ce qui produit :

Vous définissez le positionnement de l'infobulle et d'autres caractéristiques (délais, etc.) en les 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 attributs/options aquí .

Answer 4

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

<a href="#" class="has-tooltip-bottom" title="" data-original-title="Tooltip">This link</a> 
and <a href="#" class="has-tooltip" title="" data-original-title="Another link">that link</a>