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

Question

我会在twitter bootstrap中添加一个右键工具提示到图标元素。

代码是这样的：

<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声明它来设置工具提示和其他功能的定位（延迟等）：

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

如评论中所述，您可以找到其他属性/选项here。

Answer 2

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

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

View the initialize function on one element on 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的答案，使用Bootstrap 2.3.2和3.0测试data-toggle="tooltip"：

 <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

在javascript中

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

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