twitter-bootstrap 如何将 Twitter 引导工具提示添加到图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15503839/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a twitter bootstrap tooltip to an icon
提问by sharkbait
I would add a right-tooltip from twitter bootstrap to an icon element.
我会从 twitter bootstrap 添加一个正确的工具提示到一个图标元素。
The code is this:
代码是这样的：
<h3>Sensors Permissions <i class="icon-info-sign"></i></h3>
I would that, when the cursor is over the icon, is shown a right tooltip with some informations...
我希望，当光标在图标上时，会显示一个带有一些信息的正确工具提示......
How can I do? It's not enough include the tooltip.js librery and put a element in the icon code? I'm confused.
我能怎么做？包含 tooltip.js 库并在图标代码中放置一个元素还不够？我糊涂了。
Thank you.
谢谢你。
回答by nickhar
I've recently used it like this:
我最近这样使用它：
<i class="icon-ok-sign" rel="tooltip" title="Key active" id="blah"></i>
Which produces:
产生：
You set the positioning of the tooltip and other features(delays etc) by declaring it using js:
您可以通过使用 js 声明来设置工具提示和其他功能（延迟等）的位置：
$(document).ready(function(){
$("[rel=tooltip]").tooltip({ placement: 'right'});
});
As mentioned in comments, you can find other attributes/options here.
如评论中所述，您可以在此处找到其他属性/选项。
回答by jamesplease
You might be forgetting to initialize your tooltips with .tooltip().
您可能忘记使用.tooltip().
The .tooltip()function must be called on every element that you want to have a tooltip listener. This is for performance purposes. You can initialize a bunch at once by calling the function on a parent, like so: $('.tooltip-group').tooltip()
.tooltip()必须在您希望拥有工具提示侦听器的每个元素上调用该函数。这是出于性能目的。您可以通过在父级上调用该函数来一次初始化一堆，如下所示：$('.tooltip-group').tooltip()
View the initialize function on one element on JSFiddle.
Javascript
Javascript
$(document).ready(function() {
$('#example').tooltip();
});
Markup
标记
<h3>
Sensors Permissions
<i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i>
</h3>
回答by Hendy Irawan
@nickhar's answer, using data-toggle="tooltip"tested with Bootstrap 2.3.2 and 3.0 :
@nickhar 的回答，使用data-toggle="tooltip"Bootstrap 2.3.2 和 3.0 测试：
<i class="icon-ok-sign" data-toggle="tooltip" title="Key active" id="blah"></i>
Which produces:
产生：
You set the positioning of the tooltip and other features(delays etc) by declaring it using js:
您可以通过使用 js 声明来设置工具提示和其他功能（延迟等）的位置：
$(document).ready(function(){
$("[data-toggle=tooltip]").tooltip({ placement: 'right'});
});
As mentioned in comments, you can find other attributes/options here.
如评论中所述，您可以在此处找到其他属性/选项。
回答by Malay M
in javascript
在 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
在 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>
