Hover card
A preview of what a link points to, so you can check without leaving the page.
Northwind paid INV-1042 on 12 March, ten days early.
Hover the invoice number, or tab to it.
Installation
npx shadcn@latest add @quireui/hover-cardUsage
<HoverCard>
<HoverCardTrigger href="/invoices/1042">INV-1042</HoverCardTrigger>
<HoverCardContent>{/* summary */}</HoverCardContent>
</HoverCard>size: sm, md (default) or lg. It opens below the link, aligned to its start, and hides when the link scrolls out of view.
Timing
It opens after 500ms, so moving the cursor across a table full of links does not flash cards, and stays 200ms after the cursor leaves so you can move into it. Change this with delay and closeDelay on the trigger.
Good to know
A hover card is extra, never essential. Screen readers and touch get the link itself, so only show what the linked page also shows: a summary, a status, a few numbers. For anything you need to act on, use a Popover.
Built on Base UI Preview Card.
Accessibility
The card is extra detail for people who hover or focus the link; screen readers are not told about it. Keep anything that matters in the link itself or on the page.
| Key | Action |
|---|---|
| Tab | Focusing the link opens the card after the same 500ms delay as hovering. |
| Esc | Closes the card. |
| Enter | Follows the link. |
API reference
HoverCardTrigger
Waits long enough that passing the cursor over a link does not open it.
Also takes every prop of Base UI's PreviewCard.Trigger.
HoverCard
Also takes every prop of Base UI's PreviewCard.Root.
HoverCardContent
Prop
Type
Also takes every prop of Base UI's PreviewCard.Popup. Style it with [data-slot="hover-card"].