Bootstrap 4 popover appears when user click on the elements while as bootstrap tooltip appears when user mouse moves to link or button.
Note:Bootstrap popover is similar to tooltip but popover displays when the user clicks on the element.
Follow the given steps to create popover.
data-toggle="popover"
attribute to an element.
title
attribute to show the header text information of the popover.
data-content
attribute to show the the text information that will be exist inside the popover's body.
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
General Syntax
<a href="#" data-toggle="popover" title="Web Development" data-content="Web development with the help of css framework.">Show Popover</a>
Source Code
<div class="container my-2">
<a href="#" data-toggle="popover" title="Web Development" data-content="Web development with the help of CSS framework.">Show Popover</a>
</div>
Try it yourself
Note:Please keep in mind that bootstrap popover is initialized with the help of bootstrap popover method using jquery.
Generally,the popover will appear on the right side of the element.data-placement
attribute provides facility to show popover on top, bottom, left or the right side of the element.
General Syntax
<a href="#" title="Learn Web Development" data-toggle="popover" data-placement="top" data-content="To learn web development,you have to familiar with the front end & back-end development.">Top Popover</a>
Source Code
<div class="container my-2">
<a href="#" title="Learn Web Development" data-toggle="popover" data-placement="top" data-content="To learn web development,you have to familiar with the front end & back-end development.">Top Popover</a>
</div>
Try it yourself
Note:Bootstrap popover position is decided based on data-placement
property of popover.
If you like to close popover by clicking outside of popover, use data-trigger="focus"
attribute.
General Syntax
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Closing Popover</a>
Source Code
<div class="container my-2">
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Closing Popover</a>
</div>
Try it yourself
Note:
Popover is closed by outside click event whenever data-trigger="focus"
attribute is used.