ns-ui
A tooltip whose 1px border traces itself outward from the trigger's own edge and whose delay-group lets adjacent triggers hand off instantly with no re-animation, like a real menu bar.
Use when short labels across a row of adjacent triggers where moving between them should hand off instantly with no re-animation, the way a real menu bar behaves, and the panel should read as extruded from the trigger's own edge; pick hover-card-dwell instead when the tooltip is a rich card and accidental opening is the failure being solved, or popover-pendulum when the content is a panel the user interacts with.
Install
npx shadcn add https://design.helpmarq.comns-ui / tooltip-delay-group — traces out from the trigger, siblings hand off instantly
Q3 launch notes
Hover or tab through the toolbar above — the first tooltip waits out the open delay, but once it's open, every other trigger in the row answers instantly with no re-animation. The help button on the right is outside the group, so it always waits its own delay and always resolves on the left, where the room is.
| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | — | Tooltip body. Keep it short — non-interactive text/inline content only; a tooltip is never itself focusable or clickable. |
| children | ReactElement | — | A single trigger element. Gets a merged ref, pointer/focus/keyboard handlers, and aria-describedby (while open) cloned onto it. |
| side? | Side | — | Preferred side. Flips to the opposite side when there isn't room. |
| sideOffset? | number | — | Gap between trigger and panel, px. Default 8. |
| openDelay? | number | — | Delay before an isolated open (standalone, or a cold group), ms. Defaults to the enclosing PenumbraTipGroup's openDelay, else 500. |
| disabled? | boolean | — | — |
| className? | string | — | Extra classes on the tooltip panel. |