I'm trying to activate a popover when users hover their mouse over a div. Can I use a popover with a div, or am I missing something in my code? Here's what I have:
<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've also included these inside a $(document).ready() function:
$(function () {
$('[data-toggle="popover"]').popover();
});
My JavaScript script is set up correctly, and I have bootstrap.css at the 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 seem to be having issues with my popover implementation. It doesn't work even with just data-trigger = "focus". I've created a pen on codepen.io: http://codepen.io/ngp130895/pen/qZQJOJ