我想在用户将鼠标悬停在 div 上时切换弹出窗口。是否可以将 popover 与 div
一起使用,或者我做错了什么。我的代码:
<div class="grid-item content-text" data-toogle ="popover" data-content="Lorem ipsum dolor sit amet" data-trigger="hover" id="intro">
<h3> INTRO</h3>
<p>Hover me</p>
</div>
我也在 $(document).ready() 函数中使用了这些:
$(function () {
$('[data-toggle="popover"]').popover();
});
我的 js 脚本是有序的,我的 head
标签顶部有 bootstrap.css
<script type="text/javascript" src="js/jquery-1.12.3.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/customScripts.js" ></script>
但是,我认为我的弹出窗口实现有问题。即使只有 data-trigger = "focus"
,我也失败了。我在 codepen.io 上创建了一支笔:http://codepen.io/ngp130895/pen/qZQJOJ
最佳答案
基本上它没有识别哪个 element
- popover
被附加了,原因不明。但是,当我尝试提供 div
的 classname
时,它实际上识别了 element
。
$(function() {
$('.grid-item').popover();
})
Note - I've also given width to
div
and specifieddata-placement
attribute to place it properly. Sincediv
width
was100%
by default, it will movepopover
to end and hence will not be visible on the screen. You need to play around with these attributes. Also, I've not seen anywhere,popover
is used ondiv
. Please go through few of their properties and suggestions mentioned in theirofficial site
关于javascript - Bootstrap 弹出窗口不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36996576/