How to Make Bootstrap 3 Popover

Bootstrap 3 popover is similar to the tooltip , bootstrap provided us a very nice popover and today we will going to learn how to make a popover

How to make a bootstrap 3 popover

to create a bootstrap 3 popover use a title which will be shown inside the popover and use data-content="Some content inside the popover" which will be shown inside the pop over here you can use HTML element also and data-toggle="popover" and the script described below

Example:

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>



<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});
</script>

Position Of Bootstrap 3 Popover

Bootstrap 3 popover have also 4 positions which is provided by twitter bootstrap and they are top, bottom, left, right and to make that use data-placement="top", data-placement="bottom", data-placement="left" and data-placement="top" accordingly.

Example:

<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>

Closing Bootstrap 3 Popovers

To create a closing button of bootstrap 3 popover use data-trigger="focus" in a popover.

Example:

<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>

Open Bootstrap 3 Popover on hover

To make a popover open in hover use data-trigger="hover" in a popover.

Example:

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>

In this post, we have learned how to create Bootstrap 3 Popover hope the post helped you, please provide your comment to make the site better and more useful,

Thanks for reading