[英]Twitter's Bootstrap Popover: Won't work, even when other JS is working ok
I want to set up a popover using Twitter's Bootstrap. 我想使用Twitter的Bootstrap设置弹出窗口。 I've successfully used other JavaScript (dropdown, and tooltips), but I can't get this one working.
我已经成功使用了其他JavaScript(下拉菜单和工具提示),但是我无法使用它。
I've got this html inside my page: 我的页面内有这个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>
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>
BTW, it's redundant to use bootstrap-tooltips.js and bootstrap-twipsy.js. 顺便说一句,使用bootstrap-tooltips.js和bootstrap-twipsy.js是多余的。 Tooltips replaced Twipsy.
工具提示取代了Twipsy。
The important piece you're missing is the main CSS file, bootstrap.css
. 您缺少的重要部分是主CSS文件
bootstrap.css
。
Demo: http://jsfiddle.net/Sn2Zz/ 演示: http : //jsfiddle.net/Sn2Zz/
( I wasn't sure where to hotlink, so I pasted the content of bootstrap.css
.) (我不确定在哪里进行热链接,所以我粘贴了
bootstrap.css
的内容。)
Particularly, you need the .popover-*
styles. 特别是,您需要
.popover-*
样式。
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. 可能是“正在工作”,但您看不到它,因为弹出窗口在DOM中的位置就在
</body>
标记之前。
是的-如果您从其他位置加载CSS,则一切正常: http : //jsfiddle.net/dirkk0/5DGef/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.