Come aggiungere un tooltip di bootstrap di Twitter a un'icona

Question

Vorrei aggiungere un tooltop di destra dal bootstrap di Twitter a un elemento icona.

Il codice è questo:

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

Vorrei che, quando il cursore si trova sopra l'icona, viene visualizzato un tooltip scorretto con alcune informazioni ...

Come posso fare? Non è sufficiente includere la libreria tooltip.js e inserire un elemento nel codice dell'icona? Non ho capito bene.

Grazie.

Answer 1

Recentemente ho usato in questo modo:

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

che produce:

È possibile impostare il posizionamento del tooltip e altre caratteristiche (ritardi, ecc) dichiarando utilizzando js:

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

Come indicato nei commenti, è possibile ind altri attributi/opzioni here.

Answer 2

Potresti dimenticarti di inizializzare i tuoi suggerimenti con .tooltip().

La funzione .tooltip() deve essere richiamata su ogni elemento che si desidera avere un listener del tooltip. Questo è per scopi di prestazione. È possibile inizializzare un gruppo alla volta chiamando la funzione su un genitore, in questo modo: $('.tooltip-group').tooltip()

View the initialize function on one element on 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> 

Answer 3

@ risposta di nickhar, utilizzando data-toggle="tooltip" testato con Bootstrap 2.3.2 e 3.0:

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

che produce:

È possibile impostare il posizionamento del tooltip e altre caratteristiche (ritardi, ecc) dichiarando utilizzando JS:

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

Come accennato nei commenti, è può trovare altri attributi/opzioni here.

Answer 4

in javascript

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

in 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>