❮ Bootstrap5 Offcanvas Bootstrap5 Collapse ❯

Bootstrap 5 Popover

The popover control is similar to a tooltip. It displays upon clicking an element, but unlike a tooltip, it can show more content.

How to Create a Popover

Create a popover by adding data-bs-toggle="popover" to an element.

The title attribute contains the popover's title, and the data-bs-content attribute displays the popover's text content:

<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: Popovers must be initialized with JavaScript.

The following example allows you to 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)
})

Specifying the Popover Position

By default, the popover appears to the right of the element.

You can use the data-bs-placement attribute to set the direction of the popover: 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>

Closing the Popover

By default, the popover closes when you click the specified element again. You can use the data-bs-trigger="focus" attribute to close the popover by 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>

Tip: If you want the popover to appear when hovering over the element and disappear when the mouse leaves, use the data-bs-trigger attribute with the value "hover":

Example

<a href="#" title="Title" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Some content">Hover Over Me</a>

❮ Bootstrap5 Offcanvas Bootstrap5 Collapse ❯