Popover
Displays rich content in a portal, triggered by a button with flexible positioning.
Preview
Installation
Usage
Examples
Positioning
With Form
RTL Support Example
The Popover component automatically adapts to RTL layouts. Positioning mirrors correctly and content flows naturally.
LTR (English)
RTL (العربية)
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