Hover cardPro
A rich preview that appears on hover or focus and stays while you move into it.
When to use
- Previews behind links and mentions: people, repos, products, citations.
When not to use
- Essential information or actions: touch users never hover.
- Plain labels: use a tooltip.
Installation
Usage
Import it from @/components/ui/hover-card after installing.
example.tsx
import { HoverCard } from "@/components/ui/hover-card";
<HoverCard trigger={<a href="/u/ada">@ada</a>}>
<ProfilePreview user={ada} />
</HoverCard>API reference
HoverCard
Opens after a delay on hover or focus and stays open while the pointer is inside it.
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger | ReactNode | – | Usually a link; it keeps working as a link. |
| children | ReactNode | – | The preview. |
| side / align | "top" | "bottom" / "start" | "center" | "end" | "bottom" / "center" | Placement. |
| openDelay / closeDelay | number | 350 / 180 | ms. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Focusing the trigger opens the card |
| Esc | Close |
Accessibility
- The card describes the trigger via aria-describedby while open.
- Opens on keyboard focus as well as hover.
- Treat it as a bonus: the link should still make sense without it.
Motion
- Scales and slides in from its side (spring 420 / 30).
Responsive behavior
- 288px wide; touch taps follow the link instead of opening the card.
Performance
- Content renders only while open.
Notes for AI
- Don't put buttons people need inside a hover card.
This page as Markdown, for assistants and coding agents:
/components/hover-card/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt