twitter bootstrapツールチップをアイコンに追加する方法

Question

twitterブートストラップからアイコン要素に右ツールチップを追加します。

コードはこれです：

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

私は、カーソルがアイコンの上にあるとき、私はどのように行うことができます...

をいくつかの情報を持つ右のツールチップが表示されますか？ tooltip.jsのlibreryを含めるだけでは十分ではありませんし、アイコンコードに要素を追加するのですか？よくわかりません。

ありがとうございます。

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

生成する：

あなたが使用してそれを宣言することで、ツールチップやその他の機能（遅延など）の位置を設定

Answer 1

私は最近、このようにそれを使用しましたjs：

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

コメントに記載されているとおり、fその他の属性/オプションhere。

Answer 2

.tooltip()でツールチップを初期化することを忘れている可能性があります。

.tooltip()は、ツールヒントリスナーを追加するすべての要素で呼び出す必要があります。これはパフォーマンス目的のためです。あなたはそうのように、親に関数を呼び出すことによって束を一度に初期化することができます。$('.tooltip-group').tooltip()

View the initialize function on one element on JSFiddle.

Javascriptを

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

マークアップdata-toggle="tooltip"を使用して

nickharの答え@

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

Answer 3

、ブートストラップ2.3.2および3.0でテスト済み：

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

生成する：

あなたはJS使用してそれを宣言することで、ツールチップやその他の機能（遅延など）の位置を設定します。

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

をコメントで述べたように、あなたは他の属性/オプションを見つけることができますhere。

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>