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

Theme Settings
Color Scheme
Menu Color
Layout Position