Question

我正在尝试使用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>

Answer 1

应该添加

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

工作示例here

Answer 2

出于性能原因，你应该自己启动popover：

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

Reference

确保在bootstrap之前添加jQuery库。

jsFiddle

Answer 3

你缺少函数调用你的小提琴和jquery库也缺失了

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

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

这是一个弹出函数调用

GET http://localhost:8080/story/css/main.css (404)

下面的文字是从getbootstrap.com复制的，这是他们想要说的关于popover插件的内容

选择加入功能

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

初始化页面上所有弹出窗口的一种方法是选择它们   通过他们的数据切换属性：复制

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

Answer 4

您需要在code

中添加此<head>

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

Answer 5

<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

Answer 6

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

以下是fiddle

的示例代码

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

为什么我的Bootstrap popover不起作用？

6 个答案: