Popover
Last Updated: September 2026Popovers are small and interactive elevated surfaces that house simple controls. They are intended to expose controls which impact the local area where the popover was triggered.
Source CodeAnatomy
link- 1Arrow
- 2Content
Variants
linkBasic
Trigger plus content. Default side is bottom.
With arrow
arrow draws a pointer toward the trigger; combine with side.
Rich content
Actions and short structured content inside Content.
Controlled
open / onOpenChange for parent-driven state.
Usage Guidelines
linkWhen to use
- •For lightweight contextual content anchored to a control.
- •When users need a small set of actions or help without leaving the page.
- •For non-blocking UI that shouldn't dim the whole screen.
When not to use
- •For blocking confirms — use Modal.
- •For long forms or filters — use Drawer.
- •For a single word of help — use Tooltip.
Keep popover content short and directly related to the trigger.
Don't put long forms or multi-step flows in a popover.
Use popovers when the page should stay interactive behind them.
Don't use a popover for irreversible confirms — use Modal.
Behaviors
linkPositioning
- •Content is portaled and positioned with side / align.
- •sideOffset is fixed at 8px from the trigger.
Open state
- •Uncontrolled via Trigger, or controlled with open / onOpenChange.
- •Dismisses on outside click and Esc by default.
Content Guidelines
linkContent
- •Prefer a few lines of text or a short action list.
- •Use withPadding={false} only when you need edge-to-edge custom layouts.
Triggers
- •Trigger labels should hint at what will appear ('Share', 'More options').
- •Wire Trigger with render={<Button … />} (or another focusable control).
Accessibility
linkText & Labels
- •Ensure the trigger has a clear accessible name.
- •Content should make sense when announced after the trigger is activated.
ARIA attributes
- •Popover associates the floating content with its trigger.
- •Focus moves according to Base UI popover behavior when opened.
Keyboard Support
- •Enter / Space on trigger → open.
- •Esc → dismiss.
WCAG Compliance Standards
FAQs
linkPopover vs Tooltip?
Tooltip is for short read-only hints on hover/focus. Popover is for richer interactive content on click.
How do I place it above the trigger?
Set side="top" on Popover.Content. Add arrow if you want a pointer.
Can I control open state?
Yes — pass open and onOpenChange on Popover.