web-dev-qa-db-ja.com

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

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

コードはこれです：

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

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

どのようにできるのか？ tooltip.js libreryを含めて、アイコンコードに要素を入れるだけでは不十分ですか？よくわかりません。

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

javascripttwitter-bootstraptooltip
48
sharkbait

私は最近このように使用しました：

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

生成するもの：

enter image description here

ツールチップと他の機能（遅延など）の位置を設定するには、jsを使用して宣言します。

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

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

126
nickhar

.tooltip()でツールチップを初期化するのを忘れているかもしれません。

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

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

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>
16
jamesplease

@nickharの答え、Bootstrap 2.3.2および3.0でテストされたdata-toggle="tooltip"を使用して：

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

生成するもの：

enter image description here

ツールチップと他の機能（遅延など）の位置を設定するには、jsを使用して宣言します。

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

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

10
Hendy Irawan

javaScriptで

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

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>
1
Malay M