Popover
Floating content panel anchored to a trigger with precise positioning, portal rendering, and size syncing.
01 When to use
Popover is a floating panel anchored to a trigger element. Use it for
contextual surfaces — action menus, date pickers, inline help — that should appear next to the
element the user just interacted with. Built on Floating UI for placement, with native popover="auto" for the open/close lifecycle. Not modal.
Pick a different overlay if you need:
02 Examples
Sizes
Placements
Rich Content – User Profile
Sync Width
Controlled State
03 Customization
Gradient Action Panel
Glass Morphism (unstyled)
04 Accessibility
ARIA Attributes
The trigger wrapper sets aria-haspopup="dialog" and aria-expanded reflecting the current open state.
The floating panel receives role="dialog" by default. Set aria-modal when the popover contains a form or critical
action.
Keyboard
Enter / Space toggle the popover when the trigger is focused. Escape closes the popover and returns focus to the trigger. Tab moves through focusable content inside the popover.
Click Outside
Clicking outside the popover or its trigger closes it automatically. Use the ignore prop to exclude specific elements from outside-click
detection.
Focus Management
When aria-modal is set, focus stays within the popover
until it is closed. Use for forms or critical actions where escaping focus could confuse the
user. For lightweight overlays, omit it so users can freely tab away.
05 API Reference
No matching properties |