Bootstrap4 Popover
The popover plugin is similar to the tooltip; it displays after clicking on an element. Unlike the tooltip, it can display more content.
How to create a popover
By adding to the elementdata-toggle="popover"to create a popover.
titleThe content of the attribute is the title of the popover,data-contentThe attribute displays the text content of the popover:
<a href="#" data-toggle="popover" title="Popover title" data-content="Popover content">Click me multiple times</a>
Note:The popover should be written in the jQuery initialization code: then call on the specified elementpopover()method.
The following example can use a popover anywhere in the document:
Example
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
Try it Yourself »
Specify the position of the popover
By default, the popover is displayed on the right side of the element.
You can usedata-placementthe attribute to set the direction in which the popover is displayed: top, bottom, left, or right:
Example
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click me</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click me</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click me</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click me</a>
Try it Yourself »
Used in buttons:
Example
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
Try it Yourself »
Close Popover
By default, the popover closes when the specified element is clicked again. You can usedata-trigger="focus"attribute to set the popover to close when clicking outside the element:
Example
<a href="#" title="Dismiss Popover" data-toggle="popover" data-trigger="focus" data-content="Click elsewhere in the document to close me">Click me</a>
Try it Yourself »
Tip:If you want to achieve the effect of showing on mouse hover over the element and hiding when the mouse leaves, you can usedata-triggerattribute, and set the value to "hover":
Example
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Move the mouse over me</a>
Try it Yourself » Other Extensions