Javascript 为什么我的 Bootstrap 弹出框不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30051283/
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
Why does my Bootstrap popover not work?
提问by kramer65
I'm trying to use the Bootstrap popover. So I copied the exact code from the example into my website, which unfortunately doesn't work. I pasted the full code below and created a jsfiddle here.
我正在尝试使用Bootstrap popover。因此，我将示例中的确切代码复制到我的网站中，不幸的是它不起作用。我粘贴了下面的完整代码并在这里创建了一个 jsfiddle。
I tried putting it in a bootstrap container and in rows and columns, but nothing seems to work.
我尝试将它放在引导容器中以及行和列中，但似乎没有任何效果。
Does anybody how I can get that fiddle to work? All tips are welcome!
有没有人我怎么能让那个小提琴工作？欢迎所有提示！
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</body>
</html>
回答by Seblor
You forgot this : http://getbootstrap.com/javascript/#opt-in-functionality
你忘了这个：http: //getbootstrap.com/javascript/#opt-in-functionality
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:
出于性能原因，Tooltip 和 Popover data-apis 是可选的，这意味着您必须自己初始化它们。
初始化页面上所有工具提示的一种方法是通过它们的 data-toggle 属性选择它们：
$(function () {
$('[data-toggle="popover"]').popover()
})
回答by vamsikrishnamannem
回答by jmgross
回答by Nilesh Mahajan
You were missing Function call into your fiddle and jquery library was also missing
您错过了对小提琴的函数调用，也缺少 jquery 库
I have added missing dependencies into your example
我在您的示例中添加了缺少的依赖项
check fiddle:https://jsfiddle.net/L41g98qx/9/
检查小提琴：https : //jsfiddle.net/L41g98qx/9/
here is a popover function call
这是一个弹出函数调用
$(function () {
$('[data-toggle="popover"]').popover()
})
Below text is copied from getbootstrap.com, here is what they want to say about the popover plugin
下面的文字是从getbootstrap.com复制的，这是他们想对popover插件说的话
Opt-in functionality
选择加入功能
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
One way to initialize all popovers on a page would be to select them by their data-toggle attribute: Copy
$(function () { $('[data-toggle="popover"]').popover() })
出于性能原因，Tooltip 和 Popover data-apis 是可选的，这意味着您必须自己初始化它们。
初始化页面上所有弹出框的一种方法是通过它们的数据切换属性选择它们：复制
$(function () { $('[data-toggle="popover"]').popover() })
回答by sheshadri
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?" id="example">Dismissible popover</a>
This method is required
这个方法是必须的
$('#example').popover('show');
回答by khurram
You need to add this codein <head>
您需要添加这code在<head>
$(function () {
$('[data-toggle="popover"]').popover()
})
回答by Kamran
you can add an idor classattribute in the buttonand than call the popover method on that button. Here is the working fiddle. http://jsfiddle.net/uqLor9ze/.
您可以在按钮中添加一个id或class属性，button然后在该按钮上调用popover 方法。这是工作小提琴。http://jsfiddle.net/uqLor9ze/。
Here is the example code from fiddle
这是小提琴的示例代码
$('#pop').popover();
