Twitter的Bootstrap Popover：不会工作，即使其他JS工作正常答案

【问题标题】：Twitter's Bootstrap Popover: Won't work, even when other JS is working okTwitter的Bootstrap Popover：不会工作，即使其他JS工作正常
【发布时间】：2012-02-20 20:19:23
【问题描述】：

我想使用 Twitter 的 Bootstrap 设置一个弹出框。我已经成功使用了其他 JavaScript（下拉菜单和工具提示），但我无法让这个工作。

我的页面中有这个 html：

<a href="#" id="matriz" rel="popover" data-content="And here's some amazing content. It's very engaging. right?" title="A title">hover for popover</a>

我在文档正文中设置了这个：

<script>
  $(function() { 
    $('#matriz').popover({placement: 'bottom', trigger: 'hover', offset: 1});
  });
</script>

我使用热链接这样调用文件：

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/master/js/bootstrap-tooltip.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/master/js/bootstrap-dropdown.js"></script>
<script src="https://github.com/twitter/bootstrap/raw/master/js/bootstrap-popover.js"></script>
<script src="https://github.com/twitter/bootstrap/raw/master/js/bootstrap-twipsy.js"></script>

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

顺便说一句，使用 bootstrap-tooltips.js 和 bootstrap-twipsy.js 是多余的。工具提示替换了 Twipsy。

【讨论】：

【解决方案2】：

是的 - 如果您从其他地方加载 CSS，一切正常：http://jsfiddle.net/dirkk0/5DGef/

【讨论】：

谢谢！它就是这样工作的，如果我在 jsfiddle 的“Css”块中复制/粘贴这些东西，它就可以工作。这很奇怪，因为我已经在我自己的文件夹中找到了正确且完整的 css 文件并确定了（它适用于所有其他情况）。诡异的。谢谢！！

【解决方案3】：

您缺少的重要部分是主 CSS 文件，bootstrap.css。

演示：http://jsfiddle.net/Sn2Zz/

^{（我不知道在哪里热链接，所以我粘贴了bootstrap.css的内容。）}

特别是，您需要.popover-* 样式。

可能它正在“工作”，但您无法看到它，因为弹出窗口在 DOM 中的位置正好在关闭 </body> 标记之前。

【讨论】：

要在 jsFiddle 中链接其他脚本/CSS，请使用左侧菜单中的“添加资源”项。
@Inerdial：我只是在 Bootstrap github 网站上找不到 CSS 文件的来源，只有 .less 文件...实际上我尝试了this，但它似乎没有用.无论如何，谢谢。
啊，我误解了“我不确定在哪里”这一点。
感谢您的回复！但是我确实有 bootstrap.css 文件，并且它具有所有弹出框样式...，我没有文档末尾的代码部分，但我会尝试将其放在最顶部
我不确定发生了什么，但它一定与 jsfiddle/github 或引导源文件的热链接有关。 CSS 显然没有被加载（我上面提到的同样的问题）和 this demo 使用 <script> 标签而不是 jsfiddle 资源面板工作。