Hover card
A preview you can put a cursor into.
The renewal is owned by Anika Sharma, who has already reviewed the security questionnaire.
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/hover-card.jsonThe difference from a tooltip
A Tooltip is a label and closes the moment the pointer leaves. A hover card stays open while the pointer is inside it, so a link within it is reachable — and there is a short grace period on leaving, so crossing the gap between trigger and card does not close it under your cursor.
That one behaviour is the whole component. Getting it wrong makes the card feel broken rather than merely fiddly.
It never opens on focus
Deliberate, and the opposite of Tooltip. There is no keyboard way to dismiss a hover card, so opening one on tab would trap a keyboard user in content they cannot get out of. If the information matters to everyone, it belongs in a Popover — which opens on click and closes on Escape.
| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | — | Substantial content. Links inside are reachable. |
| delay | number | 300 | Hover intent before opening. |
| width | number | 280 | Fixed, so the measure stays readable. |