Question

我想使用Twitter的Bootstrap设置一个popover。我已成功使用其他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/

Twitter的Bootstrap Popover：即使其他JS正常工作也行不通

3 个答案: