Question

目前我有一个没有初始化的popover设置。我的代码如下：

HTML：

<div data-toggle="popover" data-placement="bottom" data-content="xyz">...</div>

JavaScript的：

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

我已经将我需要的所有内容包含在CSS和图书馆中，并设法通过一个小提琴来复制这个问题：https://jsfiddle.net/W3R3W0LF666/33rmse7m/

到目前为止，我已经尝试将初始化文本移动到JS文件中的各个位置以排除任何层次结构问题

Answer 1

初始化

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

弹出它

$('[data-toggle="popover"]').popover('show');

Answer 2

我已更新您的代码，请检查JSFiddle下面的代码：

  $(document).ready(function(){
    $('[data-toggle="popover"]').popover({
         placement : 'bottom'
    });
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button data-toggle="popover" class="btn btn-primary" data-content="xyz">Click Me</button>

Answer 3

检查一下这会对你有帮助..

<强> HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />


    <!-- Le styles -->
    <link href="style.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

  </head>

  <body>
    <a href="#" data-toggle="popover" title="Popover Header" data-content="XYZ">Toggle popover</a>


    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
      $(document).ready(function(){
          $('[data-toggle="popover"]').popover();   
      });
    </script>
  </body>

</html>

Answer 4

您忘记加载外部资源。

来自文档：

如何触发弹出窗口 - 单击|悬停|焦点|手册。你可以传递多个触发器;用空格隔开它们。手册不能结合任何其他触发器。

您需要定义触发器data-trigger="hover"：

<div data-trigger="hover" data-toggle="popover" data-placement="bottom" data-content="xyz">...</div>

看看这个fiddle。

PS：你的确有效，但它只会触发点击。

Answer 5

像这样包装你的jQuery脚本：

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

或者，如果您要在document ready上加载脚本，请使用：

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

原因： $ 导致 jQuery 与 plain-js/other-libraries之间的名称冲突因此为什么你必须以不同方式调用它，以便浏览器知道jQuery而不是其他库正在使用它。

这里有一个上面代码的jsfiddle：https://jsfiddle.net/AndrewL32/33rmse7m/7/

Bootstrap Popover无法显示

5 个答案: