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
| Prop | Type | Default |
|---|---|---|
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |