我会将 twitter bootstrap 中的正确工具提示添加到图标元素。
代码是这样的:
<h3>Sensors Permissions <i class="icon-info-sign"></i></h3>
我希望,当光标在图标上时,会显示一个带有一些信息的正确工具提示......
我能怎么做?包含 tooltip.js 库并在图标代码中放置一个元素还不够吗?我很困惑。
谢谢你。
我会将 twitter bootstrap 中的正确工具提示添加到图标元素。
代码是这样的:
<h3>Sensors Permissions <i class="icon-info-sign"></i></h3>
我希望,当光标在图标上时,会显示一个带有一些信息的正确工具提示......
我能怎么做?包含 tooltip.js 库并在图标代码中放置一个元素还不够吗?我很困惑。
谢谢你。
我最近这样使用它:
<i class="icon-ok-sign" rel="tooltip" title="Key active" id="blah"></i>
产生:
您可以通过使用 js 声明来设置工具提示和其他功能(延迟等)的位置:
$(document).ready(function(){
$("[rel=tooltip]").tooltip({ placement: 'right'});
});
如评论中所述,您可以在此处找到其他属性/选项。
您可能忘记使用.tooltip()
.
.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>
@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'});
});
如评论中所述,您可以在此处找到其他属性/选项。
在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>