Popovers
Live demo
We use JavaScript similar to the snippet above to render the
following live popover. Titles are set via data-bs-title and body
content is set via data-bs-content.
Popover Directions
Four options are available: top, right, bottom, and left aligned.
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 data-bs-trigger="hover" trigger Hover to
show popover.
Custom Popovers
ou can customize the appearance of popovers using CSS
variables. We set a custom class with
data-bs-custom-class="primary-popover" 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.