Popover

ReactProps

Props

API reference for Popover. For usage examples, see the React tab.

Popover.Root

Name	Type	Default
children* (required)	ReactNode	—
defaultOpen	boolean	—
Whether the overlay is open by default (uncontrolled).
isOpen	boolean	—
Whether the overlay is open by default (controlled).

Events (1)(1 prop)

Popover.Dialog

Name	Type	Default
children	((opts: DialogRenderProps) => ReactNode) | ReactNode	—
Children of the dialog. A function may be provided to access a function to close the dialog.
isEntering	boolean	—
Whether the dialog is currently performing an entry animation. Focus is not moved into the dialog until the animation completes, since moving the screen reader cursor may cause scrolling that interrupts the animation.

Accessibility (6)(6 props)

Advanced (8)(8 props)

Events (64)(64 props)

Styling (2)(2 props)

Popover.HoverRoot

Name	Type	Default
children* (required)	ReactNode	—
The trigger and Popover that make up the preview trigger.
closeDelay	number	200
The delay time in milliseconds before the preview closes.
defaultOpen	boolean	—
Whether the overlay is open by default (uncontrolled).
delay	number	600
The delay time in milliseconds before the preview opens.
isDisabled	boolean	—
Whether the tooltip should be disabled, independent from the trigger.
isOpen	boolean	—
Whether the overlay is open by default (controlled).

Events (1)(1 prop)

Popover.Panel

Name	Type	Default
children* (required)	ReactNode	—
The content rendered inside the popover.
arrowBoundaryOffset	number	0
The minimum distance the arrow's edge should be from the edge of the overlay element.
arrowRef	RefObject<Element | null>	—
A ref for the popover arrow element.
boundaryElement	Element	document.body
Element that that serves as the positioning boundary.
containerPadding	number	12
The placement padding that should be applied between the element and its surrounding container.
crossOffset	number	0
The additional offset applied along the cross axis between the element and its anchor element.
defaultOpen	boolean	—
Whether the overlay is open by default (uncontrolled).
getTargetRect	((target: Element) => DOMRect | null)	target.getBoundingClientRect()
Overrides the target element's bounding rectangle. Useful for positioning relative to a specific point such as the mouse cursor (e.g. context menus) or text selection.
isEntering	boolean	—
Whether the popover is currently performing an entry animation.
isExiting	boolean	—
Whether the popover is currently performing an exit animation.
isKeyboardDismissDisabled	boolean	false
Whether pressing the escape key to close the popover should be disabled. Most popovers should not use this option. When set to true, an alternative way to close the popover with a keyboard must be provided.
isNonModal	boolean	—
Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. Most popovers should not use this option as it may negatively impact the screen reader experience. Only use with components such as combobox, which are designed to handle this situation carefully.
isOpen	boolean	—
Whether the overlay is open by default (controlled).
maxHeight	number	—
The maxHeight specified for the overlay element. By default, it will take all space up to the current viewport height.
offset	number	8
The additional offset applied along the main axis between the element and its anchor element.
placement	Placements	—
The placement of the element with respect to its anchor element.
scrollRef	RefObject<Element | null>	overlayRef
A ref for the scrollable region within the overlay.
shouldFlip	boolean	true
Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.
shouldSkipAnimation	boolean	—
Whether the popover should appear and disappear without an entry or exit animation. This is used by components such as PreviewTrigger to skip animations when quickly swapping between overlays.
shouldUpdatePosition	boolean	true
Whether the overlay should update its position automatically.
trigger	string	—
The name of the component that triggered the popover. This is reflected on the element as the data-trigger attribute, and can be used to provide specific styles for the popover depending on which element triggered it.
triggerRef	RefObject<Element | null>	—
The ref for the element which the popover positions itself with respect to. When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc., this is set automatically. It is only required when used standalone.

Accessibility (4)(4 props)

Advanced (8)(8 props)

Events (68)(68 props)

Styling (2)(2 props)

Popover.Wrapper

Name	Type	Default
children* (required)	ReactNode	—
The content rendered inside the popover.
arrowBoundaryOffset	number	0
The minimum distance the arrow's edge should be from the edge of the overlay element.
arrowRef	RefObject<Element | null>	—
A ref for the popover arrow element.
boundaryElement	Element	document.body
Element that that serves as the positioning boundary.
containerPadding	number	12
The placement padding that should be applied between the element and its surrounding container.
crossOffset	number	0
The additional offset applied along the cross axis between the element and its anchor element.
defaultOpen	boolean	—
Whether the overlay is open by default (uncontrolled).
getTargetRect	((target: Element) => DOMRect | null)	target.getBoundingClientRect()
Overrides the target element's bounding rectangle. Useful for positioning relative to a specific point such as the mouse cursor (e.g. context menus) or text selection.
isEntering	boolean	—
Whether the popover is currently performing an entry animation.
isExiting	boolean	—
Whether the popover is currently performing an exit animation.
isKeyboardDismissDisabled	boolean	false
Whether pressing the escape key to close the popover should be disabled. Most popovers should not use this option. When set to true, an alternative way to close the popover with a keyboard must be provided.
isNonModal	boolean	—
Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. Most popovers should not use this option as it may negatively impact the screen reader experience. Only use with components such as combobox, which are designed to handle this situation carefully.
isOpen	boolean	—
Whether the overlay is open by default (controlled).
maxHeight	number	—
The maxHeight specified for the overlay element. By default, it will take all space up to the current viewport height.
offset	number	8
The additional offset applied along the main axis between the element and its anchor element.
placement	Placements	—
The placement of the element with respect to its anchor element.
scrollRef	RefObject<Element | null>	overlayRef
A ref for the scrollable region within the overlay.
shouldFlip	boolean	true
Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.
shouldSkipAnimation	boolean	—
Whether the popover should appear and disappear without an entry or exit animation. This is used by components such as PreviewTrigger to skip animations when quickly swapping between overlays.
shouldUpdatePosition	boolean	true
Whether the overlay should update its position automatically.
trigger	string	—
The name of the component that triggered the popover. This is reflected on the element as the data-trigger attribute, and can be used to provide specific styles for the popover depending on which element triggered it.
triggerRef	RefObject<Element | null>	—
The ref for the element which the popover positions itself with respect to. When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc., this is set automatically. It is only required when used standalone.

Accessibility (4)(4 props)

Advanced (8)(8 props)

Events (68)(68 props)

Styling (2)(2 props)