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.
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"
.