Hover Card
shadcn/ui
Rich preview panel on hover. For user profiles, ticket previews, and link context.
@/components/ui/hover-cardContent patterns
| Pattern | Trigger | Usage |
|---|---|---|
| User profile | Assignee name, @mention — shows avatar, role, ticket count | |
| Ticket preview | Ticket ID reference — shows title, status, priority, assignee | |
| Avatar trigger | MK | Compact avatar in table — expands to full name + role |
In context — ticket table row
| ID | Title | Status | Priority | Assignee |
|---|---|---|---|---|
| Fix login redirect | Open | High | DA |
Props — HoverCard
| Prop | Type | Description |
|---|---|---|
| openDelay | number | ms before card opens on hover (default: 700) |
| closeDelay | number | ms before card closes after mouse leave (default: 300) |
Props — HoverCardContent
| Prop | Type | Description |
|---|---|---|
| align | "start" | "center" | "end" | Card alignment relative to trigger (default: center) |
| side | "top" | "right" | "bottom" | "left" | Which side the card appears on (default: bottom) |
| sideOffset | number | Gap from the trigger in px (default: 4) |
HoverCard is mouse-only — use Tooltip for keyboard-accessible hints on icon buttons.
On this page