2012-02-20 13 views
11

Twitter BootstrapのTooltipsで遊んでいますが、Twipsyから離れたので問題があります。このJavaScriptにはJavaScriptが含まれています。JavaScriptをアクティブなTwitterのブートストラップのツールチップ

のは、私は、次のしているとしましょう:

<p><a href="#" rel="tooltip" data-original-title="hello">hover on me</a></p> 

私はツールチップを表示させるために使用する必要が正確な JavaScriptは何ですか?

ありがとうございます!

  • ヴァネッサ

答えて

14

ご例えば、それだけで次のようになります。

$('a').tooltip(); 

が、マニュアルに従って、あなたはtitle属性ではなく、data-original-titleを使用する必要があります。その属性はBootstrapのツールチップコードによって追加されます。また、rel="tooltip"の必要はありません。

あなたのコードは次のようになります。

HTML:

<a href="#" title="hello">hover on me</a> 

JS:

$("a").tooltip(); // this will trigger a tooltip on all <a> elements 
38

あなたが明示的にツールチップを持っている必要があり、すべての要素の.tooltip()を実行する必要があります。たとえば、これは動作します:ブートストラップで

<span rel="tooltip" title="tooltip text">some text</span> 
... 
<script src="/js/jquery.js"></script> 
<script src="/js/bootstrap.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $("[rel=tooltip]").tooltip(); 
    }); 
</script> 
+0

に正確にする必要があります。 オフセットがツールチップの有効なオプションであることがわかりません。ドキュメントには記載されておらず、効果がないようです。 – teebot

+0

あなたが正しいです、私はコードを修正しました。 –

+0

jquery.on()を使用してJavaScriptで読み込みを遅延させたものに対して、これを実行したい場合、どのようにすればよいでしょうか? – Dean

0

を、私たちは手動でツールチップ

そのまた、そのドキュメントで言及を初期化する必要があります。

​​
0

あなたはそれが他のすべてのリンクには影響しませんように私はむしろ、このソリューションで行くと思います

<script src="bootstrap-tooltip.js "></script> 
    <script> 
    $(function(){ 
$('a').tooltip(); 
}); 

関連する問題