Popovers

The Popover component works like a tooltip, but it appears on click and can hold more detailed content.

Create a Popover

To enable a popover, add the data-bs-toggle="popover" attribute to the element.

Set the popover's header using the title attribute, and define its main content using the data-bs-content attribute

Output:

Positioning Popovers

Popovers are positioned to the right of the element by default.

The data-bs-placement attribute lets you choose where the popover appears — top, bottom, left, or right of the element.

Output:

Closing Popovers

By default, clicking the element again will hide the popover. To make it close when clicking outside, use the data-bs-trigger="focus" attribute

Output:

Hoverable Popover

Tip To show the popover when the mouse hovers over the element, set the data-bs-trigger attribute to "hover"

Output: