Popover
A flexible popover component for displaying contextual content, forms, and actions relative to trigger elements with full accessibility support
Basic Popover Usage
Text Only Popover
Click the button to open a basic text-only popover with heading and description content
Text with Action
Click to open a popover with descriptive text and interactive action buttons
Content Variants
Form Content
Click to open a popover containing form elements with validation
List Content
Popover with bulleted list content and dismissal action
Positioning Options
Placement Variants
Select a placement option above, then click the button to see different positioning behaviors
Custom Content
Icon Button Test
Testing the new icon variant with different sizes and sr-only text:
Rich Media Content
Custom popover with rich media, icons, colored sections, and complex layouts
Scroll Behavior
New scroll behavior options provide better UX during page scrolling
Close on Scroll
closeOnScroll={true} - Popover closes when user scrolls (good for quick actions)
Mobile Support
Scroll behavior works on mobile devices with touch scrolling and momentum scrolling. Test on mobile to experience smooth popover repositioning during touch interactions.