为什么我的 Bootstrap 弹出框不起作用？答案

【问题标题】：Why does my Bootstrap popover not work?为什么我的 Bootstrap 弹出框不起作用？
【发布时间】：2015-07-15 02:05:51
【问题描述】：

我正在尝试使用Bootstrap popover。因此，我将示例中的确切代码复制到了我的网站中，但不幸的是，这不起作用。我在下面粘贴了完整的代码并创建了a jsfiddle here。

我尝试将它放在引导容器中并按行和列放置，但似乎没有任何效果。

有没有人可以让那个小提琴工作？欢迎所有提示！

<!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>

【问题讨论】：

@Gunaseelan 如果您像 OP 一样包含 bootstrap.min.js，则不需要。
我已经更新了你的 JSFiddle 演示以包含 jQuery，否则它会给出一个关于 jQuery 丢失的错误（尽管存在于你的 sn-p 中）。
大声笑，10 分钟内有 6 个关于同一件事的答案：$('[data-toggle="popover"]').popover()
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.你怎么拿到文件却没看到。
Bootstrap popover is not working的可能重复

标签： javascript html css twitter-bootstrap popover

【解决方案1】：

你忘了这个： https://getbootstrap.com/docs/3.4/javascript/#callout-popover-opt-in

出于性能原因，Tooltip 和 Popover data-apis 是可选的，这意味着您必须自己初始化它们。

初始化页面上所有工具提示的一种方法是通过它们的 data-toggle 属性来选择它们：

$(function () {
    $('[data-toggle="popover"]').popover()
})

【讨论】：

因为这是链接到并引用源的唯一答案，给你+1。

【解决方案2】：

<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>

此方法是必需的

$('#example').popover('show');

DEMO

【讨论】：

【解决方案3】：

出于性能原因，您应该自己初始化弹出窗口：

<script>
$(function () {
  $('[data-toggle="popover"]').popover()
})
</script>

Reference

确保在引导之前添加 jQuery 库。

jsFiddle

【讨论】：

【解决方案4】：

应该添加

$(function () {   
  $('[data-toggle="popover"]').popover() 
});

工作示例here

【讨论】：

【解决方案5】：

您缺少对小提琴的函数调用，并且 jquery 库也丢失了

我在您的示例中添加了缺少的依赖项

检查小提琴： https://jsfiddle.net/L41g98qx/9/

这是一个弹出框函数调用

$(function () {
  $('[data-toggle="popover"]').popover()
})

以下文字是从 getbootstrap.com 复制的，这是他们想对 popover 插件说的话

选择加入功能

出于性能原因，Tooltip 和 Popover data-apis 是可选的，这意味着您必须自己初始化它们。

初始化页面上所有弹出框的一种方法是选择它们通过他们的 data-toggle 属性：复制

$(function () { $('[data-toggle="popover"]').popover() })

【讨论】：

【解决方案6】：

您需要在正文中添加此code </body> 标签

$(function () {
$('[data-toggle="popover"]').popover()
})

【讨论】：

将此添加到不起作用。在中添加时开始工作。
我现在已经更新了我的答案。谢谢你的建议

【解决方案7】：

您可以在button 中添加id 或class 属性，然后在该按钮上调用popover 方法。这是工作小提琴。 http://jsfiddle.net/uqLor9ze/.

这是来自fiddle的示例代码

 $('#pop').popover();

【讨论】：