Jak dodać etykietkę programu startowego twitter do ikony

Question

Dodałbym prawą podpowiedź z twitter bootstrap do elementu ikony.

Kod jest to:

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

bym, że gdy kursor znajduje się nad ikoną, upomniany przez właściwą podpowiedź z niektórych informacji ...

Jak mogę to zrobić? Nie wystarczy włączyć tooltip.js do biblioteki librery i umieścić element w kodzie ikon? Jestem zmieszany.

Dziękuję.

Answer 1

I niedawno używany go tak:

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

która produkuje:

ustawić pozycjonowanie podpowiedzi i innych cech (opóźnienia etc) poprzez uznanie go za pomocą js:

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

Jak wspomniano w komentarzach, można f ind inne atrybuty/opcje here.

Answer 2

Być może zapomniałeś zainicjować etykietki narzędzi za pomocą .tooltip().

Funkcja musi być wywoływana dla każdego elementu, który ma być detektorem podpowiedzi. Ma to na celu wydajność. Można zainicjować kilka naraz poprzez wywołanie funkcji na rodzica, tak jak poniżej: $('.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

@ odpowiedź nickhar, wykorzystując data-toggle="tooltip" testowane przy użyciu Bootstrap 2.3.2 i 3.0:

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

która produkuje:

ustawić pozycjonowanie podpowiedzi i innych cech (opóźnienia etc) poprzez uznanie go za pomocą JS:

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

Jak wspomniano w komentarzach, ty może znaleźć inne atrybuty/opcje here.

Answer 4

w javascript

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

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