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/