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

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

javascript html css twitter-bootstrap

Javascript 为什么我的Bootstrap popover不起作用？,javascript,html,css,twitter-bootstrap,popover,Javascript,Html,Css,Twitter Bootstrap,Popover,我在试着用这个。因此，我将示例中的确切代码复制到了我的网站中，不幸的是，这不起作用。我在下面粘贴了完整的代码并创建了我试着把它放在一个引导容器中，并以行和列的形式，但似乎没有任何效果有人知道我怎样才能让小提琴演奏吗？欢迎所有提示 <!DOCTYPE html> <html lang="en"> <head> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script&

我在试着用这个。因此，我将示例中的确切代码复制到了我的网站中，不幸的是，这不起作用。我在下面粘贴了完整的代码并创建了

我试着把它放在一个引导容器中，并以行和列的形式，但似乎没有任何效果

有人知道我怎样才能让小提琴演奏吗？欢迎所有提示

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


单击以切换弹出窗口

您需要将此

代码添加到
中

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

您可以在按钮中添加id
或class
属性，然后在该按钮上调用popover方法。这是工作小提琴
下面是来自的示例代码
应该添加
$(function () {   
  $('[data-toggle="popover"]').popover() 
});

工作示例
出于性能原因，您应该自己初始化popover：
<script>
$(function () {
  $('[data-toggle="popover"]').popover()
})
</script>


$（函数（）{
$（'[data toggle=“popover”]'）。popover（）
})


确保在引导之前添加jQuery库
您忘记了这一点：

出于性能原因，工具提示和Popover数据API是可选的，这意味着您必须自己初始化它们
初始化页面上所有工具提示的一种方法是通过数据切换属性选择它们：
您丢失了对fiddle的函数调用，jquery库也丢失了
我已将缺少的依赖项添加到您的示例中
检查小提琴：
$(function () {
  $('[data-toggle="popover"]').popover()
})

下面是一个popover函数调用
$(function () {
  $('[data-toggle="popover"]').popover()
})

下面的文字是从getbootstrap.com复制的，下面是他们想说的关于popover插件的内容
选择加入功能
出于性能原因，工具提示和Popover数据API是可选的，这意味着您必须自己初始化它们
初始化页面上所有弹出窗口的一种方法是选择它们
按其数据切换属性：复制
$（函数（）{$（'[data toggle=“popover”]'）.popover（）}）

@Gunaseelan如果你像OP一样包含bootstrap.min.js
，你不需要这样做。我已经更新了你的JSFIDLE演示，让它包含了jQuery，否则它会给出一个关于jQuery丢失的错误（尽管在你的代码片段中存在）。哈哈，10分钟内回答了6个相同的问题：$（'[data toggle]=“popover”]'）。popover（）
出于性能原因，工具提示和popover数据API是可选的，这意味着您必须自己初始化它们。为什么您得到了文档，但您还没有看到它。可能的重复，因为这是链接并引用源代码+1的唯一答案。
$(function () {
  $('[data-toggle="popover"]').popover()
})

<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');