Bir simge için bir twitter bootstrap araç ipucu nasıl eklenir

Question

Bir twitter bootstrap öğesinden bir simge öğesine doğru bir araç ipucu eklerim.

Nasıl yapabilirim ... imleç simgesi üzerinde olduğunda

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

Bunun, bazı bilgiler ile sağ araç ipucu gösterilir olacaktır:

kod böyle? Tooltip.js librery'yi dahil etmek yeterli değil ve simge koduna bir eleman yerleştirmek yeterli değil mi? Kafam karıştı.

Teşekkür ederiz.

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

üretir Hangi:

Şu bağlantıyı kullanarak bildirerek araç ipucu ve diğer özellikler (gecikmeler vb) konumlandırılmasını ayarlamak

Answer 1

Geçenlerde böyle kullandım js:

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

Yorumlarda belirtildiği gibi, Diğer öznitelikler/seçenekler here.

Answer 2

Araç ipuçlarınızı .tooltip() ile başlatmayı unutuyor olabilirsiniz.

Bir araç ipucu dinleyicisine sahip olmak istediğiniz her öğede .tooltip() işlevi çağrılmalıdır. Bu performans amaçlıdır. Öyle gibi bir ebeveyn üzerinde işlevini çağırarak bir demet seferde başlatabilir: $('.tooltip-group').tooltip()

View the initialize function on one element on JSFiddle.

Javascript

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

Biçimlendirme data-toggle="tooltip" kullanılarak

nickhar cevabı @

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

Answer 3

, Bootstrap 2.3.2 ve 3.0:

ile test edilmiştir.

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

üretir Hangi:

Sen js kullanarak bildirerek araç ipucu ve diğer özellikler (gecikmeler vs.) konumlandırılmasını ayarlamak:

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

açıklamalarda belirtildiği gibi, Diğer özellikleri/seçenekleri here bulabilirsiniz.

Answer 4

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>