Overlays
Tooltip
Driven entirely by CSS, so it renders on the server and costs nothing at runtime. The bubble is hidden from assistive technology on purpose: an icon-only control already carries its name in aria-label, and the tooltip exists to give that name back to sighted readers rather than announce it twice. It holds a label, never a paragraph.
npx shadcn@latest add @minflow/tooltipWhere to use it
- Naming a control whose label was stripped for space.
- Expanding an abbreviation or a truncated value without changing the layout.
- Never on an IconButton, which already wraps one, and never on touch-first surfaces; PopupTip is the tap-to-reveal version.
Variations
Above the trigger
The default. Above works everywhere except the top edge of a scroll container, where the bubble would be clipped.
Below the trigger
For triggers in a header or along the top of a panel, where an upward bubble would sit off screen.
On truncated text
When a value is clipped to fit a column. The tooltip returns the full string on hover without letting the column reflow.