Bootstrap Popover Example with HTML on Hover

Bootstrap Popover is not just another Tooltip but it has been introduced to display additional information of any element in a web page - something similar to iPad. The real power of the popovers has been their ability to hold images, videos, text or any other html markup. But I haven’t seen anywhere a proper example of bootstrap popovers that reveals their true nature. So many of them are using it like a mere tooltip with some text.

But don’t worry. Let me show you here the right example of bootstrap popover with html content.

Bootstrap Popover Example with HTML on Hover

For this example, I want to display a popover for an image and to show and hide on mouse hover. And that too with html markup. This is how you should create it.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Popover Example</title>
    <link rel="stylesheet" href="/path/to/bootstrap.css"type="text/css" />
</head>

<body>
    <img src="images/nissan-micra.jpg" alt="nissan-micra" id="vehicle" data-toggle="popover" />
    
    <script src="/path/to/jquery-1.10.2.js"></script>
    <script src="/path/to/bootstrap.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('#vehicle').popover({
                title: '<h4><span class="glyphicon glyphicon-hand-right"></span> Nissan Micra</h4>',
                content: '<ul><li>1.6L I4 Engine</li><li>109 HP Power</li><li>Front-Wheel Drive</li><li>5-Speed Manual</li><li>2+3 Seating</li></ul>',
                html: true,
                container: 'body',
                placement: 'right',
                trigger: 'hover'
            });
        });
    </script>
</body>
</html>

And the above code would result something like this,

Bootstrap Popover Example on Hover

The method, $('#vehicle').popover() will trigger the popover component of the particular element on hover. Similar to tooltip component, bootstrap popovers also should be triggered manually.

Moreover this method comes with various customizing options and I have used some of them in the above script to display popover as per my liking.

The option title - will add title to the popover.
The option content - is the actual content displayed inside the popover component.
The option html - set as true to insert html markup inside the content.
The option container - will append the popover to a specific element given. Here it appends it to body.
The option placement - this will set the position of the popover. It can take any of the four directions such as left / right / top / bottom.
The option trigger - it tells how the popover should be triggered. Setting it as hover will show only when the mouse hovers over the element.

Also you can see that the above popover example uses a simple icon - which is from bootstrap’s glyphicon on the heading section. Likewise you can show up images or videos or whatever you need.

Setting Bootstrap Popover Options via Data Attribute

I prefer javascript to set option values but bootstrap also provides alternative way to set them. That is by using data attributes.

If you want to use data attribute method, then prefix all the above options with ‘data-’ like data-title data-content data-trigger etc. And you can skip the option settings inside the popover method. Use it simply like this.

<img src="images/nissan-micra.jpg" alt="nissan-micra" id="vehicle" data-toggle="popover" data-title="My Heading" data-content="my content" data-placement="top" data-trigger="hover" />

...

<script type="text/javascript">
    $(document).ready(function(){
        $('#vehicle').popover();
    });
</script>

Recommended Read:

That’s all about creating bootstrap popovers on hover with html content. I hope you like this bootstrap popover example. Meet you in the next post. Good Day :)

Bootstrap Popover Example with HTML on Hover

Bootstrap Popover Example with HTML on Hover

Setting Bootstrap Popover Options via Data Attribute

2 comments: