Bootstrap5 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 an elementdata-bs-toggle="popover"to create a popover.

titleThe content of the attribute is the title of the popover,data-bs-contentthe attribute displays the text content of the popover:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover content">Click me multiple times</button>

Note:The popover must be written in the JavaScript initialization code.

The following example can use popovers anywhere in the document:

Example

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl) })

Try it »

Specify the position of the popover

By default, the popover appears on the right side of the element.

You can usedata-bs-placementthe attribute to set the direction in which the popover appears: top, bottom, left, or right:

Example

<a href="#" title="Title" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="I am the content part">Click me</a> <a href="#" title="Title" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="I am the content part">Click me</a> <a href="#" title="Title" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="I am the content part">Click me</a> <a href="#" title="Title" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="I am the content part">Click me</a>

Try it »

Close popover

By default, the popover will close after clicking the specified element again. You can usedata-bs-trigger="focus"the attribute to set closing the popover when clicking outside the element:

Example

<a href="#" title="Dismiss popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click elsewhere in the document to close me">Click me</a>

Try it »

Tip:If you want to achieve the effect of showing when the mouse moves over the element and hiding when it moves away, you can usedata-bs-triggerthe attribute and set the value to "hover":

Example

<a href="#" title="Title" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Some content">Move the mouse to me</a>

Try it »
Other extensions