Twitter 的 Bootstrap Popover：即使其他 JS 工作正常，也无法工作
我想使用 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>
I want to set up a popover using Twitter's Bootstrap.
I've successfully used other JavaScript (dropdown, and tooltips), but I can't get this one working.
I've got this html inside my page:
<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>
I've set inside the document body this:
<script>
$(function() {
$('#matriz').popover({placement: 'bottom', trigger: 'hover', offset: 1});
});
</script>
I've called the files like this, using hotlinks:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
顺便说一句，使用 bootstrap-tooltips.js 和 bootstrap-twipsy.js 是多余的。工具提示取代了 Twipsy。
BTW, it's redundant to use bootstrap-tooltips.js and bootstrap-twipsy.js. Tooltips replaced Twipsy.
是的 - 如果您从其他地方加载 CSS，则一切正常： http://jsfiddle.net/dirkk0/5DGef/< /a>
Yes - if you load the CSS from elsewhere, everything works: http://jsfiddle.net/dirkk0/5DGef/
您缺少的重要部分是主 CSS 文件
bootstrap.css。演示：http://jsfiddle.net/Sn2Zz/
（我不确定在哪里热链接，所以我粘贴了
bootstrap.css的内容。）特别是，您需要
.popover-*样式。很可能它正在“工作”，但您无法看到它，因为弹出窗口在 DOM 中的位置就在结束
标记之前。The important piece you're missing is the main CSS file,
bootstrap.css.Demo: http://jsfiddle.net/Sn2Zz/
( I wasn't sure where to hotlink, so I pasted the content of
bootstrap.css.)Particularly, you need the
.popover-*styles.Chances are it was "working", but you weren't able to see it because the popup's position in the DOM is right before the closing
</body>tag.