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