Popover
A floating panel that appears on demand, containing supplementary content or actions.
Basic usage
A controlled popover with a title, a description, and actions. Pass open and onOpenChange when an action inside should close it.
Explanation
An uncontrolled popover that explains a metric. It closes on Escape or a click outside. Widen it with className.
Form
A short form for a quick edit. Focus moves into the popover when it opens and returns to the trigger when it closes. align="start" lines it up with the trigger's left edge.
Usage
Popover.Content is 256px wide (w-64) with no horizontal padding. It aligns to the end of the trigger unless you pass align. Use Popover.Anchor to position the content against an element other than the trigger.
Popover.Root
Whether the popover is open
Callback when the open state changes
Default open state
Default: false
Whether the popover should be modal
Default: false
Popover.Content
Preferred side of the trigger to render against
Default: bottom
Distance in pixels from the trigger
Default: 10
Alignment of the popover content
Default: end
Additional offset in pixels for the alignment
Default: -5
Whether the popover should avoid collisions with viewport edges
Default: true
Elements to use as collision boundaries
Padding to add to collision boundaries
Default: 12
Padding between the arrow and the edges of the popover
Default: 0
Whether the popover should stick to the trigger
Default: partial
Whether to hide the popover when the trigger becomes detached
Default: false
Render the content through a Radix Portal
Default: true
Additional CSS classes to apply to the popover content