Bootstrap popover не работает

Question

Я хочу переключать popover, когда пользователи наводили указатель мыши на 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> 

Я также ут их в функции $ (документ) .ready():

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

Мой JS скрипт в порядке и у меня есть bootstrap.css в верхней части моего 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> 

Однако, я думаю, что что-то не так с моей реализацией popover. Я потерпел неудачу даже с data-trigger = "focus". Я создал ручку на codepen.io: http://codepen.io/ngp130895/pen/qZQJOJ

Answer 1

В основном это не было идентификация, к которой element - popover был прикреплен по причинам, неизвестным. Но когда я попробовал это с предоставлением classnamediv, он фактически идентифицировал element.

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

DEMO HERE

Примечание - Я также дал ширину div и указанный data-placement атрибут, чтобы поместить его должным образом. Так как divwidth был 100% по умолчанию, он переместит popover в конец и, следовательно, не будет виден на экране. Вам нужно поиграть с этими атрибутами. Кроме того, я нигде не видел, popover используется на div. Пожалуйста, пройти через некоторые из их свойств и предложений упоминается в их official site