Popover
Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
Do you know the latest update of 2022? Our roadmap is alive for future updates.
Notifications
4 New
Debi Cakar commented on Ecosystem and conservation
1m ago
Edward Adams invite you to Prototyping
9h ago
Richard Charles mentioned you in UX Basics Field
13h agoYou swapped exactly 0.230000 ETH for 28,031.99
17h ago
Basic
Four directions
Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.
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.
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-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.