Filters (components)

How to align the popup relative to the specified side.

Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment.

The function takes a data object parameter with the following properties:

• data.anchor: the dimensions of the anchor element with properties width and height.
• data.positioner: the dimensions of the positioner element with properties width and height.
• data.side: which side of the anchor element the positioner is aligned against.
• data.align: how the positioner is aligned relative to the specified side.

Determines the element to focus when the popover is closed.

• false: Do not move focus.
• true: Move focus based on the default behavior (trigger or previously focused element).
• RefObject: Move focus to the ref element.
• function: Called with the interaction type (mouse, touch, pen, or keyboard). Return an element to focus, true to use the default behavior, null to fall back to the default behavior, or false/undefined to do nothing.

Determines the element to focus when the popover is opened. By default, focus moves to the first tabbable element inside the popup, except when the popover is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.

• false: Do not move focus.
• true: Move focus based on the default behavior (first tabbable element or popup).
• RefObject: Move focus to the ref element.
• function: Called with the interaction type (mouse, touch, pen, or keyboard). Return an element to focus, true to use the default behavior, null to fall back to the default behavior, or false/undefined to do nothing.

Which side of the anchor element to align the popup against. May automatically change to avoid collisions.

Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment.

The function takes a data object parameter with the following properties:

• data.anchor: the dimensions of the anchor element with properties width and height.
• data.positioner: the dimensions of the positioner element with properties width and height.
• data.side: which side of the anchor element the positioner is aligned against.
• data.align: how the positioner is aligned relative to the specified side.

Allows you to replace the component's HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.

How long to wait before closing the popover that was opened on hover. Specified in milliseconds.

Requires the openOnHover prop.

How long to wait before the popover may be opened on hover. Specified in milliseconds.

Requires the openOnHover prop.

A handle to associate the trigger with a popover.

ID of the trigger. In addition to being forwarded to the rendered element, it is also used to specify the active trigger for the popover in controlled mode (with the PopoverRoot triggerId prop).

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>). Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (e.g. <div>).

Whether the popover should also open when the trigger is hovered.

A payload to pass to the popover when it is opened.

Allows you to replace the component's HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.