popover on hover in wordpress

1 Views

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, 

<a href="Projektorer-research.jpg" data-toggle="popover" data-trigger="hover" data-content="test"><img class="alignnone size-full wp-image-134" src="Projektorer-research.jpg" alt="Projektorer-research" width="268" height="150" /></a>

here i used data-content=”test” for example, actually i want to display unordered list over there.

Post Views: 1

Related posts

2 comments

  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>

  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><a href=""><img src="images/alico-logo.png" alt=""/></a></li>
                <li><a href=""><img src="images/national.png" alt=""/></a></li>
                <li><a href=""><img src="images/traveller.png" alt=""/></a></li>
                <li><a href=""><img src="images/progressive.png" alt=""/></a></li>
                <li><a href=""><img src="images/formost.png" alt=""/></a></li>
                <li><a href=""><img src="images/the.png" alt=""/></a></li>
                <li><a href=""><img src="images/circle.png" alt=""/></a></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>

Comments are closed.