Popover

Popovers are interactive floating elements that display rich content, anchored to a trigger element when a user clicks or optionally hovers over it.

import * as Popover from '@base_ui/react/Popover';
const PopoverArrow = Popover.Arrow;

Props of the native component are also available.

Name	Type	Default	Description
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
hideWhenUncentered	bool	false	If `true`, the arrow is hidden when it can't point to the center of the anchor element.
render	element \| func	-	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use PopoverArrow to change the default props of this component with the theme.

import * as Popover from '@base_ui/react/Popover';
const PopoverBackdrop = Popover.Backdrop;

Props of the native component are also available.

Name	Type	Default	Description
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
container	HTML element \| func	false	The container element to which the backdrop is appended to.
keepMounted	bool	false	If `true`, the backdrop remains mounted when the popover content is closed.
render	element \| func	-	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use PopoverBackdrop to change the default props of this component with the theme.

import * as Popover from '@base_ui/react/Popover';
const PopoverClose = Popover.Close;

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use PopoverClose to change the default props of this component with the theme.

import * as Popover from '@base_ui/react/Popover';
const PopoverDescription = Popover.Description;

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use PopoverDescription to change the default props of this component with the theme.

import * as Popover from '@base_ui/react/Popover';
const PopoverPopup = Popover.Popup;

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use PopoverPopup to change the default props of this component with the theme.

import * as Popover from '@base_ui/react/Popover';
const PopoverPositioner = Popover.Positioner;

Props of the native component are also available.

Name	Type	Default	Description
alignment	'center' \| 'end' \| 'start'	'center'	The alignment of the popover popup element to the anchor element along its cross axis.
alignmentOffset	number	0	The offset of the popover popup element along its alignment axis.
anchor	HTML element \| object \| func	-	The element to which the popover popup element is anchored to.
arrowPadding	number	5	Determines the padding between the arrow and the popover popup edges. Useful when the popover popup element has rounded corners via `border-radius`.
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
collisionBoundary	HTML element \| Array<HTML element> \| string \| { height?: number, width?: number, x?: number, y?: number }	'clippingAncestors'	The boundary that the popover popup element should be constrained to.
collisionPadding	number \| { bottom?: number, left?: number, right?: number, top?: number }	5	The padding between the popover popup element and the edges of the collision boundary to add whitespace between them to prevent them from touching.
container	HTML element \| func	-	The container element to which the popover positioner is appended to.
hideWhenDetached	bool	false	Whether the popover popup element is hidden if it appears detached from its anchor element due to the anchor element being clipped (or hidden) from view.
keepMounted	bool	false	Whether the popover popup remains mounted in the DOM while closed.
positionStrategy	'absolute' \| 'fixed'	'absolute'	The CSS position strategy for positioning the popover popup element.
render	element \| func	-	A function to customize rendering of the component.
side	'bottom' \| 'left' \| 'right' \| 'top'	'bottom'	The side of the anchor element that the popover popup element should be placed at.
sideOffset	number	0	The gap between the anchor element and the popover popup element.
sticky	bool	false	Whether to allow the popover to remain stuck in view while the anchor element is scrolled out of view.

The ref is forwarded to the root element.

Theme default props

You can use PopoverPositioner to change the default props of this component with the theme.

import * as Popover from '@base_ui/react/Popover';
const PopoverRoot = Popover.Root;

Props of the native component are also available.

Name	Type	Default	Description
animated	bool	true	Whether the tooltip can animate, adding animation-related attributes and allowing for exit animations to play. Useful to disable in tests to remove async behavior.
closeDelay	number	0	The delay in milliseconds until the popover popup is closed when `openOnHover` is `true`.
defaultOpen	bool	-	Specifies whether the popover is open initially when uncontrolled.
delay	number	300	The delay in milliseconds until the popover popup is opened when `openOnHover` is `true`.
delayType	'hover' \| 'rest'	'rest'	The delay type to use when `openOnHover` is `true`. `rest` means the `delay` represents how long the user's cursor must rest on the trigger before the popover popup is opened. `hover` means the `delay` represents how long to wait as soon as the user's cursor has entered the trigger.
followCursorAxis	'none' \| 'x' \| 'y'	'none'	Determines which axis the tooltip should follow the cursor on.
onOpenChange	func	-	Callback fired when the popover popup is requested to be opened or closed. Use when controlled.
open	bool	-	If `true`, the popover popup is open. Use when controlled.
openOnHover	bool	false	If `true`, the popover popup opens when the trigger is hovered.

The component cannot hold a ref.

import * as Popover from '@base_ui/react/Popover';
const PopoverTitle = Popover.Title;

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use PopoverTitle to change the default props of this component with the theme.

PopoverTrigger API

Import

import * as Popover from '@base_ui/react/Popover';
const PopoverTrigger = Popover.Trigger;

Props

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use PopoverTrigger to change the default props of this component with the theme.

Popover

PopoverArrow API

Import

Props

Theme default props

PopoverBackdrop API

Import

Props

Theme default props

PopoverClose API

Import

Props

Theme default props

PopoverDescription API

Import

Props

Theme default props

Theme default props

PopoverPositioner API

Import

Props

Theme default props

PopoverRoot API

Import

Props

PopoverTitle API

Import

Props

Theme default props

PopoverTrigger API

Import

Props

Theme default props