Hover Card
A preview of what a link leads to.
Default
Hover the name: the card opens and stays while the pointer is on it.
Bigger than a tooltip and meant to be entered: the pointer can travel from the link into the card without it closing, so what is inside can be clicked. Keep it to a preview — nothing in it should be the only way to reach something.
Installation
npx philcn@latest add hover-cardThe file is written into your project. It is yours from then on — change it as you like.
Props
| Prop | Type | What it does |
|---|---|---|
| HoverCard.openDelay | number | How long the pointer must rest before it opens. |
| HoverCard.closeDelay | number | How long it waits before closing once the pointer leaves. |
| HoverCardContent.side | Side | Which side of the trigger it prefers. |
| HoverCardContent.align | Align | How it lines up along that side. |
Types are read from the library itself, so this table cannot describe an option the code no longer has.