Hover Card
A card that appears when hovering over a trigger element.
Import
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@retents/ui/hover-card"Usage Guidelines
When to use
- To show a rich preview of linked content on hover, such as user profile cards, link previews, or resource summaries.
- When the preview content is read-only and informational.
When NOT to use
- For short text labels — use Tooltip instead.
- For interactive content the user needs to click into — use Popover instead.
- When the content is essential and must be accessible on touch devices — HoverCard is hover-only. Put essential content in the page directly.
Accessibility
Like tooltips, hover cards are triggered on hover and are not reliably accessible on touch devices. Use them only for supplementary, non-essential content.
Preview
Usage
<HoverCard>
<HoverCardTrigger asChild>
<Button variant="link">@username</Button>
</HoverCardTrigger>
<HoverCardContent>
Hover card content with user details.
</HoverCardContent>
</HoverCard>