Hover Card
A card that appears when hovering over a trigger element, providing additional information or context.
When To Use
Use the Hover Card component when you need to:
- Show additional information about an item without requiring a click
- Provide context or details for user profiles, links, or terms
- Preview content before navigation
- Display supplementary information without disrupting the user's flow
- Create tooltips with rich content and interactive elements
Hover Cards are especially useful for user interfaces where users benefit from seeing more information without committing to a full navigation or interaction.
Examples
Hover over me
Sunset Restaurant
Props
HoverCard
| Prop | Type | Default |
|---|---|---|
closeDelay? | number | - |
openDelay? | number | - |
onOpenChange? | ((open: boolean) => void) | - |
defaultOpen? | boolean | - |
open? | boolean | - |
HoverCardTrigger
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | - |
referrerPolicy? | HTMLAttributeReferrerPolicy | - |
type? | string | - |
target? | HTMLAttributeAnchorTarget | - |
ping? | string | - |
media? | string | - |
hrefLang? | string | - |
href? | string | - |
download? | any | - |
key? | Key | null | - |
HoverCardContent
| Prop | Type | Default |
|---|---|---|
onInteractOutside? | ((event: PointerDownOutsideEvent | FocusOutsideEvent) => void) | - |
onFocusOutside? | ((event: FocusOutsideEvent) => void) | - |
onPointerDownOutside? | ((event: PointerDownOutsideEvent) => void) | - |
onEscapeKeyDown? | ((event: KeyboardEvent) => void) | - |
forceMount? | true | - |
updatePositionStrategy? | "always" | "optimized" | - |
hideWhenDetached? | boolean | - |
sticky? | "partial" | "always" | - |
collisionPadding? | number | Partial<Record<"top" | "right" | "bottom" | "left", number>> | - |
collisionBoundary? | Boundary | Boundary[] | - |
avoidCollisions? | boolean | - |
arrowPadding? | number | - |
alignOffset? | number | - |
align? | "center" | "start" | "end" | - |
sideOffset? | number | - |
side? | "top" | "right" | "bottom" | "left" | - |
asChild? | boolean | - |
key? | Key | null | - |