javascript - Twitter ブートストラップ ツールチップをアイコンに追加する方法

Question

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

コードは次のとおりです。

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

カーソルがアイコンの上にあるときに、いくつかの情報を含む正しいツールチップが表示されるようにします...

どのようにできるのか？tooltip.js ライブラリをインクルードし、アイコン コードに要素を配置するだけでは十分ではありませんか? よくわかりません。

ありがとうございました。

Answer 1

私は最近、次のように使用しています。

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

生成するもの:

js を使用して宣言することにより、ツールチップとその他の機能 (遅延など) の配置を設定します。

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

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

Answer 2

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

この.tooltip()関数は、ツールチップリスナーが必要なすべての要素で呼び出す必要があります。これはパフォーマンスを目的としています。次のように、親で関数を呼び出すことにより、束を一度に初期化できます。$('.tooltip-group').tooltip()

JSFiddleの1つの要素の初期化関数を表示します。

Javascript

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

マークアップ

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

Answer 3

data-toggle="tooltip"Bootstrap 2.3.2 および 3.0 でテスト済みの @nickhar の回答:

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

生成するもの:

js を使用して宣言することにより、ツールチップとその他の機能 (遅延など) の配置を設定します。

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

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