Bootstrap弹出窗口无法正常工作

Question

引导弹出窗口没有显示我的页面

这是我的HTML:

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

以下是我添加的所有js和css文件:

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/bootstrap.min.css")
@Styles.Render("~/Content/bootstrap.css")
@Styles.Render("~/Content/bootstrap-theme.css")
@Styles.Render("~/Content/css/default.css")

@Scripts.Render("~/Scripts/jquery-2.1.1.js")
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/Scripts/bootstrap.js")

谁能告诉我问题出在哪里？

PS:有没有办法让popover工作而不必编写任何脚本代码？

Answer 1

来自弹出文件:

选择加入功能:
出于性能原因,Tooltip和Popover数据apis是选择加入的,这意味着您必须自己初始化它们.

所以你必须.popover()在JavaScript中手动调用,如下所示:

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

或者你可以使用你想要的任何选择器

这是使用StackSnippets的示例.

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

body {
  padding: 50px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


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

注意:这类似于Bootstrap Tooltip Not Showing Up的答案

Answer 2

虽然接受的答案很好,但在处理弹出窗口时,请注意双初始化的情况(小提琴示例).以下JavaScript将失败.

<br/>
<br/>
<a href="#" id="firstButton" class="btn btn-primary" rel="popover" data-message="Message">Click Me (Working)</a>
<br/>
<br/>
<a href="#" id="secondButton" class="btn btn-primary" rel="popover" data-message="Message">Click Me (Failing)</a>

如果您进行双重初始化并且您的弹出窗口使用可能更改的值或自定义内容等,您将处于一个受伤的世界:

$(function () {
    $('#firstButton').popover({
      container: "body",
      html: true,
      content: function () {
        return '<div class="popover-message">' + $(this).data("message") + '</div>';
      }
    });
    $('#secondButton').popover(); // <-- The first initializer does this, which causes the next one to fail on the next line.
    $('#secondButton').popover({
      container: "body",
      html: true,
      content: function () {
        return '<div class="popover-message">' + $(this).data("message") + '</div>';
      }
    });
});