Popover
View on StorybookStorybookDisplays rich content in a portal, triggered by a button with flexible positioning.
Preview
Installation
Usage
Examples
Positioning
With Form
Props
| Name | Type | Default | Description |
|---|---|---|---|
align | "start" | "center" | "end" | "center" | The preferred alignment against the trigger |
side | "top" | "right" | "bottom" | "left" | "bottom" | The preferred side of the trigger to render against |
sideOffset | number | 4 | The distance in pixels from the trigger |
Accessibility
Keyboard Navigation
- Space - Open/close the popover
- Enter - Open/close the popover
- Esc - Close the popover
- Tab - Navigate through focusable elements in the popover
ARIA Attributes
- Trigger has aria-expanded indicating open state
- Trigger has aria-controls linking to the popover content
- Popover content is rendered in a portal for proper stacking
- Focus management when opening and closing
RTL Support
The Popover component is fully RTL-compatible with automatic positioning adaptation.
- Positioning automatically adapts to text direction
- Left/right sides mirror in RTL mode
- Content layout respects text direction
- Animations flow naturally in both directions
Use Cases
Rich tooltips with interactive content
Color pickers and mini-editors
Quick actions on hover or click
Date/time picker containers
Best Practices
Do
- ✓ Position relative to trigger with collision detection
- ✓ Keep content concise and actionable
- ✓ Allow dismissal via Escape and click outside
Don't
- ✗ Don't use for complex forms — use Dialog instead
- ✗ Don't place important content only in popovers
- ✗ Don't open multiple popovers simultaneously