Overlays
Popover
Anchored to the control that opened it and dismissed by Escape or a pointer down outside. The transform origin is taken from the placement, so the panel appears to grow out of the trigger edge rather than fade in over it, which is what keeps the relationship between control and surface obvious. Popover is the plain container; PopupTip is the packaged version for a paragraph of explanation behind an info glyph.
npx shadcn@latest add @minflow/popoverWhere to use it
- Small tasks that belong to a control: share, filter, quick settings.
- Detail on touch surfaces, where hover does not exist, through PopupTip.
- Never for a few words naming a control; that is a tooltip, and it needs no JavaScript at all.
Variations
Anchored panel
The default. A handful of controls that belong to the trigger and would clutter the toolbar if they lived there permanently.
Side and alignment
When the trigger sits near an edge. Flip the side so the panel opens into the page, and align it to the edge the trigger is closest to.
Popup tip
A sentence or two of explanation behind an info glyph. Reach for this instead of a tooltip whenever the surface is touch-first or the text runs past a few words.
Controlled
When something other than the trigger has to open or close the panel, such as a keyboard shortcut or a step in a walkthrough. Pass open and onOpenChange and the popover stops managing its own state.