javascript - Bootstrap 弹出窗口不起作用

Question

我想在用户将鼠标悬停在 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

Answer 1

基本上它没有识别哪个 element - popover 被附加了，原因不明。但是，当我尝试提供 div 的 classname 时，它实际上识别了 element。

$(function() {
  $('.grid-item').popover();
})

DEMO HERE

Note - I've also given width to div and specified data-placement attribute to place it properly. Since div width was 100% by default, it will move popover 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 on div. Please go through few of their properties and suggestions mentioned in their official site