Popover

Interactive content anchored to a trigger.

import { Popover } from 'components/UI/Popover'

Basic popover

Use a popover for content that the user interacts with next to a trigger. Click the trigger to open it. Set the width on Popover.Popup.

With a close button

Popover.Close closes the popover. Popover.Popup takes positioner props, such as align="start".

Open on hover

Set openOnHover on Popover.Trigger for a hover card on a trigger that is not a link. The popover still opens on click, tap, and keyboard, so all users can reach it. delay and closeDelay set the timing in milliseconds.

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Choose the component from the trigger and the content. A hover card on a trigger that is not a link hides its content from touch users, so use a popover there.

Component	Trigger	Content	Opens on
Tooltip	Any control	A short text label	Hover, focus
PreviewCard	A link	A rich preview of the link target	Hover, focus
Popover with openOnHover	Not a link	Rich content, with or without controls	Hover, click, tap, keyboard

For a task that needs full focus, use Dialog.
Do not set overflow on Popover.Popup, because it clips the arrow. Scroll an element inside it.

API

Props that the library adds. Every part also takes all the Base UI props.

Popover.Popup

Prop	Type	Default	Description
sideOffset	number	8	The gap between the trigger and the popup, in pixels.
container	HTMLElement \| ShadowRoot \| RefObject \| null	–	The element that the popup renders into. The default is the document body.