popover on hover in wordpress - wordpress

Question

I want popover on hover of product images in WordPress, i used popover.js also include js and css of bootstrap. my WordPress theme has included bootstrap.
here is my product image code,
<img class="alignnone size-full wp-image-134" src="Projektorer-research.jpg" alt="Projektorer-research" width="268" height="150" />
here i used data-content="test" for example, actually i want to display unordered list over there.

Answer 1

Are you initializing your Popovers? You must initialize them yourself with JS like in the example Snippet.
See docs working example.
$(function() {
$('[data-toggle="popover"]').popover();
});
body,
html {
margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<a href="#" data-toggle="popover" data-trigger="hover" data-content="test">
<img class="alignnone size-full wp-image-134" src="http://placehold.it/350x150" alt="..." width="268" height="150" />
</a>

Answer 2

i think you are trying to display custom(html) content in your popover, if you do like below you can set any content in your popover.
<div id="popover_content" class="row company-logo" style="display: none">
<ul>
<li><img src="images/alico-logo.png" alt=""/></li>
<li><img src="images/national.png" alt=""/></li>
<li><img src="images/traveller.png" alt=""/></li>
<li><img src="images/progressive.png" alt=""/></li>
<li><img src="images/formost.png" alt=""/></li>
<li><img src="images/the.png" alt=""/></li>
<li><img src="images/circle.png" alt=""/></li>
</ul>
</div>
<a id="popx" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="">Click to toggle popover</a>
and initialize your popover like this:
<script>
$(function () {
$('#popx').popover({
html: true,
content: function () {
return $('#popover_content').html();
}
});
;
})
</script>