Bootstrap 弹出窗口不起作用

Question

I want to toggle a popover when users hover their mouse in to a div. Is using popover with div possible or I am doing something wrong. My code:

<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>

I also ut these in $(document).ready() function:

  $(function () {
    $('[data-toggle="popover"]').popover();
  });

My js script is in order and i do have bootstrap.css at top of my head tag

<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>

However, I think there is something wrong with my popover implementation. I failed even with just data-trigger = "focus" . I created a pen on codepen.io: http://codepen.io/ngp130895/pen/qZQJOJ

Answer 1

Basically it was not identifying to which element - popover was attached, for reasons unknown. But when I tried it with giving classname of the div it actually identified the 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