Popovers
Simple Popover
Popover is a component which displays a box with a content after a click on an element - similar to the tooltip but can contain more content.
Dismiss on Next Click
Use the focus trigger to dismiss popovers on
the user’s next click of a different element than the toggle
element.
Hover
Use the attribute data-bs-trigger="hover" to
show the popover on hovering the element.
Four Directions
Four options are available: top, right, bottom, and left aligned.
Custom Popovers
You can customize the appearance of popovers using CSS
variables. We set a custom class with
data-bs-custom-class="popover-primary" to scope
our custom appearance and use it to override some of the
local CSS variables.
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> and
override the pointer-events on the disabled
element.