ns-ui
A hover-card trigger that has to be wound before it opens: a hairline arc coils clockwise around a 5px dot while the pointer dwells, and drifting away mid-wind visibly unwinds it back instead of firing.
Use when Reach for hover-card-dwell when the popover's failure mode you're solving is opening when the user didn't mean to hover there — link previews, profile cards, definition popovers — and you want the hover delay itself made visible as a charging gate rather than a hidden setTimeout. Its trigger is a real link with aria-haspopup="dialog" that has to be wound (~350ms of continuous dwell, visibly, via the coiling arc) before the card opens, and un-winds back with nothing shown if the pointer leaves early. Reach for tooltip-delay-group instead when the thing you're building is a plain tooltip that should always fire on hover/focus (no gate, no refusal) and the interesting problem is arrival — resolving from the trigger's own edge with delay-group handoff between siblings — not intent-gating.
Install
npx shadcn add https://design.helpmarq.comRelease notes / v4.2
The new streaming parser replaces the buffered baseline in every edge region this release, a change proposed by Alex Rivera after last quarter’s request coalescing postmortem made the case for both changes landing together.
| Prop | Type | Default | Description |
|---|---|---|---|
| href | string | — | Destination for the trigger link. |
| children | ReactNode | — | Trigger label — the text (or element) the coil winds around. |
| preview | ReactNode | — | Card body: link preview, profile summary, definition — whatever the hover-card should show. |
| previewLabel? | string | — | Accessible name for the popover. Defaults to a name derived from `children` when it's plain text. |
| className? | string | — | — |