web-dev-qa-db-fra.com

Comment ajouter une info-bulle Twitter bootstrap) à une icône

J'ajouterais une info-bulle à droite de Twitter bootstrap) à un élément icon.

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 de droite avec quelques informations s’affiche ...

Comment puis-je faire? Cela ne suffit pas d'inclure la bibliothèque tooltip.js et de mettre un élément dans le code de l'icône? Je suis confus.

Merci.

javascripttwitter-bootstraptooltip
48
sharkbait

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

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

Qui produit:

enter image description here

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 attributs/options ici .

126
nickhar

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

La fonction .tooltip() doit être appelée sur chaque élément pour lequel vous souhaitez créer un écouteur d'info-bulle. Ceci est à des fins de performance. Vous pouvez initialiser un groupe à la fois en appelant la fonction sur un parent, comme suit: $('.tooltip-group').tooltip()

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

Javascript

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

Markup

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

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>

Qui produit:

enter image description here

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 attributs/options ici .

10
Hendy Irawan

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>
1
Malay M