如何将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'});
});

如评论中所述,您可以在此处找到其他属性/选项.

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.0 进行测试:

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

哪个产生:

您可以通过使用js声明工具提示和其他功能(延迟等)来定位:

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

如评论中所述,您可以在此处找到其他属性/选项.