Popovers

Toggle the visibility of content across your project with a few classes and our JavaScript plugins.

Basic Popovers

Feel free to use either `title` or `data-bs-title` in your HTML. When `title` is used, Popper will replace it automatically with `data-bs-title` when the element is rendered.

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

For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus"` so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.

Color Background

Add custom class with `data-bs-custom-class="custom-popover-color-{name}"` to scope our custom appearance and use it to override some of the local CSS variables.