Popovers

Basic example

Basic Popover example with least configuration.

Four directions

Four options are available: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL. Set data-bs-placement to change the direction.

Dismiss on next click

Use the focus trigger to dismiss popovers on the user’s next click of an element other than the toggle element.

Dismissible popover

Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper <div> or <span>, ideally made keyboard-focusable using tabindex="0".