为什么我的 Bootstrap 弹出窗口不起作用？

Question

我正在尝试使用 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 容器中并按行和列放置，但似乎没有任何效果。

有人知道如何让 fiddle 工作吗？欢迎所有提示！

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

您需要在正文中 </body> 标记

上方添加此 code

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

Answer 2

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

这是来自 fiddle

的示例代码

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

Answer 3

应添加

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

工作示例here

Answer 4

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

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

Reference

务必在bootstrap之前添加jQuery库。

jsFiddle

Answer 5

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

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:

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

Answer 6

您缺少对 fiddle 的函数调用，并且 jquery 库也丢失

我已将缺少的依赖项添加到您的示例中

检查 fiddle: https://jsfiddle.net/L41g98qx/9/

这里是弹出框函数调用

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

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

选择加入功能

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() })

Answer 7

<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

为什么我的 Bootstrap 弹出窗口不起作用？

Why does my Bootstrap popover not work?

html

javascript

css

popover

twitter-bootstrap