推特's Bootstrap Popover:赢得't工作，即使其他JS工作正常

Twitter's Bootstrap Popover: Won't work, even when other JS is working ok

本文关键字：工作 其他 JS 赢得 Bootstrap Popover 推特      更新时间：2023-09-26

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

BTW，使用bootstrap-tools.js和bootstrap-twipsy.js是多余的。工具提示取代了twipsy。

是-如果从其他地方加载CSS，一切都可以：http://jsfiddle.net/dirkk0/5DGef/

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

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

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

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

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

相关文章：