#### Elevate Your Design with CoreUI PRO!

Unlock a world of possibilities: More themes, enhanced components (Date Picker, Multi Select, and more), and priority support.

Popover Basic example
Popover Four directions

Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.

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

Dismissible popover
Popover 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"`.

For disabled popover triggers, you may also prefer `data-coreui-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.