如何将twitter引导工具提示添加到图标

我会从twitter引导添加一个右图工具提示到一个图标元素。

代码是这样的：

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

我会，当光标在图标上，显示一个正确的工具提示与一些信息…

我能怎么做？ 包含tooltip.js librery并在图标代码中添加元素是不够的？ 我很困惑。

谢谢。

Answer 1

我最近使用它是这样的：

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

其中产生：

您可以通过使用js声明来设置工具提示和其他function（延迟等）的位置：

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

正如评论中提到的，你可以在这里find其他的属性/选项。

Answer 2

您可能忘记使用.tooltip()初始化您的工具提示。

.tooltip()函数必须在您想要提供工具提示侦听器的每个元素上调用。 这是为了性能目的。 你可以通过调用父类的函数来初始化一堆，如下所示： $('.tooltip-group').tooltip()

在JSFiddle的一个元素上查看初始化函数。

使用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

@ nickhar的回答，使用data-toggle="tooltip"与Bootstrap 2.3.2和3.0testing：

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

其中产生：

您可以通过使用js声明来设置工具提示和其他function（延迟等）的位置：

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

正如评论中提到的，你可以在这里find其他的属性/选项。

Answer 4

在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>