twitter-bootstrap Twitter 引导工具提示说明不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15023239/
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
Twitter bootstrap tooltip directions not working?
提问by Hailwood
I noticed that my twitter bootstrap tooltips were not respecting data-position.
我注意到我的 twitter bootstrap 工具提示不尊重data-position.
So, I headed over to the Twitter Bootstrap tooltips demo, specifically looking at the "Tooltip on X" examples, and this is what I get:
因此，我前往Twitter Bootstrap 工具提示演示，特别是查看“X 上的工具提示”示例，这就是我得到的：
It looks like there is no support for the direction?
貌似没有方向支持？
But, the popovers, which the tooltips inherit from (or possibly it's the other way around?) work:
但是，工具提示继承自的弹出窗口（或者可能是相反的方式？）工作：
Browsers tried:
浏览器尝试过：
Chromium 24.0 on Ubuntu 12.10
Firefox 19.0 on Ubuntu 12.10
Ubuntu 12.10 上的 Chromium 24.0 Ubuntu 12.10 上的
Firefox 19.0
Is this a bug that should be reported, or something else going on here?
这是一个应该报告的错误，还是这里发生的其他事情？
回答by Shail
Jsfiddle Jsfiddle with tooltip working
的jsfiddle的jsfiddle与提示工作
Its not a bug , but we need to initialize them .
ImportantBootstrap website states "For performance reasons, the tooltip and popover data-apis are opt in, meaning you must initialize them yourself." Bootstrap website Tooltip section
这不是错误，但我们需要初始化它们。
重要的Bootstrap 网站声明“出于性能原因，工具提示和弹出数据 API 是选择加入的，这意味着您必须自己初始化它们。” Bootstrap 网站工具提示部分
<div class="navbar tooltip-demo">
<ul class="nav">
<li><a class="top" title="" data-placement="top" data-toggle="tooltip" href="#" data-original-title="Tooltip on top">Tooltip on top</a></li>
<li><a class="right" title="" data-placement="right" data-toggle="tooltip" href="#" data-original-title="Tooltip on right">Tooltip on right</a></li>
<li><a class="bottom" title="" data-placement="bottom" data-toggle="tooltip" href="#" data-original-title="Tooltip on bottom">Tooltip on bottom</a></li>
<li><a class="left" title="" data-placement="left" data-toggle="tooltip" href="#" data-original-title="Tooltip on left">Tooltip on left</a></li>
</ul>
</div>
The javascript to use , you will have to initialize
要使用的 javascript，您必须初始化
$('a').tooltip();
回答by M.Hoover
The easiest way I have found to initialize tooltips with Bootstrap is to match their code so any of your tooltips will work.
我发现使用 Bootstrap 初始化工具提示的最简单方法是匹配它们的代码，以便您的任何工具提示都可以使用。
$(function () {
$("[data-toggle='tooltip']").tooltip();
});
OR you can actually add this line to the very end of your bootstrap-tooltip.js file
或者您实际上可以将此行添加到 bootstrap-tooltip.js 文件的最后
}(window.jQuery); //<-- last line of bootstrap-tooltip.js
$("[data-toggle='tooltip']").tooltip();
I basically planned on if I am going to use the tooltip code, then I might as well have it enabled by default. So, I put this in my bootstrap-tooltip.js file.
我基本上计划了是否要使用工具提示代码，然后我最好默认启用它。所以，我把它放在我的 bootstrap-tooltip.js 文件中。
回答by inDream
I think it's a bug. From http://twitter.github.com/bootstrap/assets/js/application.jsyou can see the demo is called with 'selector' option.
我认为这是一个错误。从http://twitter.github.com/bootstrap/assets/js/application.js你可以看到演示是用“选择器”选项调用的。
$('.tooltip-demo').tooltip({
selector: "a[data-toggle=tooltip]"
});
But the 'show' function in bootstrap-tooltip.jswill not check for 'selector' option when handling 'placement'. Therefore bug occurred.
但是bootstrap-tooltip.js 中的 'show' 函数在处理 'placement' 时不会检查 'selector' 选项。因此出现了错误。
placement = typeof this.options.placement == 'function' ?
this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement
Demo for this bug: http://jsfiddle.net/indream/xFC7G/
Related github issue: https://github.com/twitter/bootstrap/issues/6832
此错误的演示：http: //jsfiddle.net/indream/xFC7G/
相关 github 问题：https: //github.com/twitter/bootstrap/issues/6832
