我想从Twitter Bootstrap添加一个右侧工具提示到图标元素。代码如下:
<h3>Sensors Permissions <i class="icon-info-sign"></i></h3>
我希望,当光标在图标上时,会显示一个带有一些信息的右侧工具提示。
e0bqpujr1#
我最近这样使用它:
<i class="icon-ok-sign" rel="tooltip" title="Key active" id="blah"></i>
它产生:
您可以使用js声明工具提示和其他特性(延迟等)的位置:
$(document).ready(function(){ $("[rel=tooltip]").tooltip({ placement: 'right'}); });
正如评论中提到的,您可以在这里找到其他属性/选项。
roqulrg32#
您可能忘记使用.tooltip()初始化工具提示。.tooltip()函数必须在每个想要拥有工具提示监听器的元素上调用。这是为了提高性能。您可以通过在父元素上调用该函数来一次初始化一组元素,如下所示:$('.tooltip-group').tooltip()View the initialize function on one element on JSFiddle.
.tooltip()
$('.tooltip-group').tooltip()
$(document).ready(function() { $('#example').tooltip(); });
<h3> Sensors Permissions <i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i> </h3>
fd3cxomn3#
@nickhar的答案,使用Bootstrap 2.3.2和3.0测试的data-toggle="tooltip":
data-toggle="tooltip"
<i class="icon-ok-sign" data-toggle="tooltip" title="Key active" id="blah"></i>
$(document).ready(function(){ $("[data-toggle=tooltip]").tooltip({ placement: 'right'}); });
o4tp2gmn4#
在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>
4条答案
按热度按时间e0bqpujr1#
我最近这样使用它:
它产生:
您可以使用js声明工具提示和其他特性(延迟等)的位置:
正如评论中提到的,您可以在这里找到其他属性/选项。
roqulrg32#
您可能忘记使用
.tooltip()
初始化工具提示。.tooltip()
函数必须在每个想要拥有工具提示监听器的元素上调用。这是为了提高性能。您可以通过在父元素上调用该函数来一次初始化一组元素,如下所示:$('.tooltip-group').tooltip()
View the initialize function on one element on JSFiddle.
Javascript
标记
fd3cxomn3#
@nickhar的答案,使用Bootstrap 2.3.2和3.0测试的
data-toggle="tooltip"
:它产生:
您可以使用js声明工具提示和其他特性(延迟等)的位置:
正如评论中提到的,您可以在这里找到其他属性/选项。
o4tp2gmn4#
在javascript中
在html中