Overlays · §10.3
Hover card
A preview on hover or focus.
Code
<HoverCard><HoverCardTrigger href="…">…</HoverCardTrigger><HoverCardContent>…</HoverCardContent></HoverCard>Accessibility
- A preview only; the trigger is a real link.
Usage
Do
- Staff previews of a person or a request.
Don't
- Never put actions in a hover card.
Platforms
- Web
- apps/web/components/ui/hover-card.tsx
- iOS
- —
- Android
- —