Overlays
Popover
A panel anchored to a control, holding content you can interact with.
When to reach for it
Examples
default
Notes
Radix Popover root, trigger, anchor and close, as typed passthroughs.
Props
Takes no props of its own.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
PopoverContent
A panel anchored to a control, holding content the reader can interact with.
The line against Tooltip is not visual, it is behavioural: a tooltip describes and cannot be entered; a popover holds things you tab to. Anything with a link, a field or a button in it is a popover, and putting that inside a tooltip makes it unreachable — the tooltip closes as soon as focus tries to move into it.
Against DropdownMenu: a menu is a list of actions with menu semantics and arrow-key navigation. A popover is free-form, and its contents Tab like the rest of the page.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | Names the panel for assistive tech. Required — a popover is a dialog. | |
| showClose | boolean | false | Show the top-end close control. |
Also accepts everything in ComponentProps<typeof PopoverPrimitive.Content>. Those are forwarded to the underlying element and are not listed row by row.
Re-exports
Popover = PopoverPrimitive.RootRadix Popover root, trigger, anchor and close, as typed passthroughs.
PopoverTrigger = PopoverPrimitive.TriggerPopoverAnchor = PopoverPrimitive.AnchorPopoverClose = PopoverPrimitive.CloseKeyboard
| Key | Does |
|---|---|
| EnterSpace | Opens it. |
| Tab | Moves through its contents like the rest of the page. |
| Escape | Closes it and returns focus to the trigger. |
Accessibility
- Inside a bounded frame — a device preview, an embedded console — wrap the subtree in `<OverlayContainer container={el}>`. The panel then renders into that element and collides with its edges instead of the viewport’s, and inherits the `dir` and `data-density` set there.
- label is required: a popover is a dialog, and an unnamed one announces nothing.
- Its contents Tab like the rest of the page, unlike a menu’s arrow-key list.