如何让 Twitter Bootstrap jQuery 元素（工具提示、弹出框等）工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9302667/
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 get Twitter Bootstrap jQuery Elements (tooltip, popover, etc) working?
提问by Kyle Carlson
I've been playing with the Twitter Bootstrap test page in Dreamweaver and I absolutely can not get any sort of popover, tooltip, or other Bootstrap jQuery goodie to work. I've copied code from the demo page, poured over the source code, have direct links to all the correct JavaScript files, and still nothing. The CSS works fine though, just none of the animation.
我一直在 Dreamweaver 中使用 Twitter Bootstrap 测试页面，但我绝对无法获得任何类型的弹出窗口、工具提示或其他 Bootstrap jQuery 好东西。我已经从演示页面复制了代码，倾注了源代码，有指向所有正确 JavaScript 文件的直接链接，但仍然没有。CSS 工作正常，只是没有动画。
The demo page mentions this code for something:
演示页面提到了以下代码：
$('#example').popover(options)
But I have no idea what to do with something like that because I didn't see anything like that in any working site.
但是我不知道如何处理这样的事情，因为我在任何工作站点都没有看到这样的事情。
If anyone could give me any suggestions for the (probably) tiny link I'm missing, I'd greatly appreciate it.
如果有人可以就我遗漏的（可能）小链接给我任何建议，我将不胜感激。
EDIT
编辑
I found the following code snippet after posting this:
发布后我发现了以下代码片段：
$(document).ready(function() {
$("a[rel=popover]")
.popover({
offset: 10
})
.click(function(e) {
e.preventDefault()
})
});
And it got the popovers triggering! I never saw anything like that in the source code of any of the working sites I saw though. Really wish the Bootstrap documentation could have made that tiny detail a bit clearer for new jQuery users like me.
它触发了弹出窗口！我从来没有在我看到的任何工作站点的源代码中看到类似的东西。真的希望 Bootstrap 文档能让像我这样的新 jQuery 用户更清楚这些微小的细节。
回答by Neil Goodman
For people coming here from Google:
对于从 Google 来到这里的人：
You can get tooltip and popover to work automatically like the other Bootstrap plugins with the following code:
您可以使用以下代码使工具提示和弹出框像其他 Bootstrap 插件一样自动工作：
<script type="text/javascript">
$(function () {
$('body').popover({
selector: '[data-toggle="popover"]'
});
$('body').tooltip({
selector: 'a[rel="tooltip"], [data-toggle="tooltip"]'
});
});
</script>
You can then use data attributes like normal:
然后，您可以像平常一样使用数据属性：
<a rel="tooltip" title="My tooltip">Link</a>
<a data-toggle="popover" data-content="test">Link</a>
<button data-toggle="tooltip" data-title="My tooltip">Button</button>
This is what the Bootstrap docs mean when it says that the data-api for these plugins are "opt in".
这就是 Bootstrap 文档所说的这些插件的 data-api 是“选择加入”的意思。
回答by Calvin
You need to specify an id or class for the element you want to display a popover when it's hovered over. Here's an example:
您需要为要在鼠标悬停时显示弹出框的元素指定一个 id 或类。下面是一个例子：
<div id="example">Some element</div>
<script>
$('#example').popover({
title: 'A title!',
content: 'Some content!'
})
</script>
回答by Hitesh Modha
If you want bootstrap tooltip then:
如果你想要引导工具提示，那么：
$(function () {
$("[rel='tooltip']").tooltip();
});
If you want Jquery tooltip then:
如果你想要 Jquery 工具提示，那么：
/*** Handle jQuery plugin naming conflict between jQuery UI ***/
$.widget.bridge('uitooltip', $.ui.tooltip);
$(function () {
$("[rel='tooltip']").uitooltip();
});
HTML will remain same in both the case:
在这两种情况下，HTML 将保持不变：
<div title="Tooltip text" rel="tooltip"> div data ... </div>
