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