Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
Popovers
Popovers are powerful UI components that provide contextual information or additional content when users interact with elements. They enhance user experience by displaying helpful information, tooltips, or rich content without disrupting the page flow. Built with accessibility in mind, popovers can be triggered by various user interactions and positioned flexibly around their trigger elements.
Basic Usage
Popovers are initialized using data-bs-toggle="popover" and can be triggered by
different user interactions. Use data-bs-title for the header and
data-bs-content for the body. The data-bs-trigger
attribute controls how the popover is activated (click, hover, focus).
Directional Placement
Control popover positioning with the data-bs-placement attribute. Options include
top, right, bottom, or left. The placement
automatically adjusts if there isn't enough space in the specified direction.
Interactive Elements
Popovers can be applied to various interactive elements, including disabled buttons and links.
For disabled elements, wrap them in a container that can receive the focus and trigger events.
Use data-bs-trigger="hover focus"
to support both mouse and keyboard interactions.
Rich Content
Enhance popovers with HTML content using data-bs-html="true". This allows you to
include formatted text, icons, and other HTML elements within your popovers. Remember to
properly escape content to prevent XSS vulnerabilities.