overlaysstable

Popover

Floating contextual content with collision handling and flexible positioning.

Documentation

Options

Usage

Import the component and configure it with the same props used in the playground.

Examples

Common patterns and practical usage examples.

Basic

Floating contextual content.

Placement

Positions content relative to the trigger.

Open change handler

Observes popover visibility from application state.

Modal

Modal interaction semantics.

Arrow and close action

Adds an arrow and an explicit close control inside the popover.

Separate anchor

Positions content from an anchor while using a separate trigger.

Position relative to me

API

Props available for the React Popover.

34 props

Popover

Prop	Type	Default	Description
`children`Required	`ReactNode`	-	Popover trigger, anchor, content, and compound children.
`portal`	`boolean`	`true`	Renders popover content through a portal.
`strategy`	`'absolute' \| 'fixed'`	`'absolute'`	CSS positioning strategy used by floating content.
`open`	`boolean`	-	Controlled open state.
`defaultOpen`	`boolean`	-	Initial open state for uncontrolled usage.
`modal`	`boolean`	`false`	Uses modal interaction semantics while the popover is open.
`onOpenChange`	`((open: boolean, details: PopoverOpenChangeDetails) => void)`	-	Called when the open state changes.
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Preferred side for popover content relative to the anchor.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Alignment along the chosen side.
`sideOffset`	`number`	`8`	Distance between the anchor and popover content.
`collisionPadding`	`number`	-	Padding used when avoiding viewport collisions.
`avoidCollisions`	`boolean`	`true`	Allows the popover to flip or shift to stay visible.

Popover.Trigger

Prop	Type	Default	Description
`children`Required	`ReactNode`	-	Trigger content.
`asChild`	`boolean`	-	Composes trigger behavior onto a single child element.

Popover.Content

Prop	Type	Default	Description
`asChild`	`boolean`	-	Composes content behavior onto a single child element.
`initialFocus`	`RefObject<HTMLElement \| null>`	-	Element that should receive focus when the popover opens.
`returnFocus`	`boolean`	-	Restores focus to the trigger when the popover closes.
`closeOnEscape`	`boolean`	-	Closes the popover when Escape is pressed.
`closeOnOutsidePress`	`boolean`	-	Closes the popover when pressing outside the content.
`onEscapeKeyDown`	`((event: KeyboardEvent) => void)`	-	Called when Escape is pressed while the popover is open.
`onPointerDownOutside`	`((event: OverlayOutsideEvent) => void)`	-	Called when a pointer down occurs outside popover content.
`onInteractOutside`	`((event: OverlayOutsideEvent) => void)`	-	Called when an interaction occurs outside popover content.
`onOpenAutoFocus`	`((event: OverlayAutoFocusEvent) => void)`	-	Called before focus moves into the popover after opening.
`onCloseAutoFocus`	`((event: OverlayAutoFocusEvent) => void)`	-	Called before focus is restored after closing.

Popover.Title

Prop	Type	Default	Description
`children`Required	`ReactNode`	-	Title text for popover content.
`asChild`	`boolean`	-	Composes title behavior onto a single child element.

Popover.Description

Prop	Type	Default	Description
`children`Required	`ReactNode`	-	Description text for popover content.
`asChild`	`boolean`	-	Composes description behavior onto a single child element.

Popover.Close

Prop	Type	Default	Description
`children`Required	`ReactNode`	-	Close button content.
`asChild`	`boolean`	-	Composes close behavior onto a single child element.

Popover.Arrow

Prop	Type	Default	Description
`align`	`'center' \| 'end' \| 'start'`	`'center'`	Arrow alignment along the popover edge.
`offset`	`string \| number`	-	Arrow offset from the aligned edge.

Popover.Anchor

Prop	Type	Default	Description
`children`Required	`ReactNode`	-	Element used as the positioning anchor.
`asChild`	`boolean`	-	Composes anchor behavior onto a single child element.

Accessibility

Guidance for accessible usage and interaction.

Trigger relationship

Use trigger content and popover title or description to clarify the relationship.

childrenopenonOpenChange

Dismissal and focus

Keep focus and dismissal predictable when content contains interactive controls.

modalsidealignonOpenChange

Explicit close controls

Provide a close action when popover content contains interactive or multi-step content.

children

Related components

Explore components that are commonly used alongside this one.

generalstable

Button

Accessible actions with multiple appearances, colors, sizes, and composition support.

View component

overlaysstable

Tooltip

Contextual labels with managed delay, positioning, and accessibility.

View component

overlaysstable

Modal

Accessible modal dialogs with focus management, dismissal, and compound structure.

View component