Twitter的Bootstrap Popover：即使其他JS工作正常，也无法正常工作

Question

我想使用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>

Answer 1

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

Answer 2

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

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

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

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

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

Answer 3

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