为什么我的Bootstrap popover不能使用?

问题描述 投票:9回答:7

我正在尝试使用 Bootstrap popover. 所以我把例子中的代码准确地复制到我的网站中,不幸的是,这并不工作。我把完整的代码粘贴到下面,并创建了 在这里,一个jsfiddle.

我试着把它放在一个bootstrap容器和行和列,但似乎没有工作。

有谁知道我怎么能让那个小玩意工作?欢迎所有的技巧!

<!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>
javascript html css twitter-bootstrap popover
7个回答
29
投票

你忘了这一点。https:/getbootstrap.comdocs3.4javascript#callout-popover-opt-in。

出于性能方面的考虑,Tooltip和Popover的数据-apis是可选的,这意味着你必须自己初始化它们。

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

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

2
投票

应该添加

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

实例 此处


2
投票

由于性能原因,你应该自己启动popover。

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

参考文献

请确保在bootstrap之前添加jQuery库。

jsFiddle


2
投票

你的fiddle中缺少Function调用,jquery库也缺少。

我在你的例子中加入了缺失的依赖关系

检查提琴。 https:/jsfiddle.netL41g98qx9

这里是一个popover 函数调用

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

下面的文字是从getbootstrap.com复制过来的,这是他们对popover插件的评价。

选择加入功能

出于性能方面的考虑,Tooltip和Popover数据-apis都是可选的,这意味着你必须自己初始化它们。

一个初始化页面上所有弹出式菜单的方法是通过数据切换属性来选择它们。复制

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


1
投票

你需要添加这个 code<head>

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

1
投票
<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');

演示


0
投票

你可以添加 idclass 属性中的 button 并在该按钮上调用popover方法。这里是工作中的fiddle。http:/jsfiddle.netuqLor9ze.

以下是示例代码 抚弄

 $('#pop').popover();
© www.soinside.com 2019 - 2024. All rights reserved.