HoverCards
A hover card component that displays additional content when hovering over a trigger element. Perfect for showing previews, tooltips, user profiles, and contextual information without cluttering the interface.
Installation
Import
Usage
Hover cards are perfect for showing additional context without cluttering the interface. Use them for user profiles, previews, tooltips, and contextual information. They're ideal for links, usernames, and interactive elements where you want to provide more information on hover. Hover cards automatically handle positioning and animations, making them easy to use.
Design Guidelines
Hover cards should appear quickly but not too aggressively - the default delay of 700ms provides a good balance. Keep content concise and scannable. Use appropriate sizing - typically 200-300px wide for text content. Position cards to avoid covering important content. Use different sides and alignments based on available space. Ensure hover cards are accessible and work well with keyboard navigation.
Basic Usage
Simple hover card with text content
User Profile Card
Hover card showing user profile information
Different Positions
Hover cards positioned on different sides
With Alignment
Hover card with custom alignment
HoverCard
Root hover card component This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | undefined | Controlled open state |
onOpenChange | (open: boolean) => void | undefined | Callback fired when open state changes |
openDelay | number | 700 | Delay in milliseconds before opening |
closeDelay | number | 300 | Delay in milliseconds before closing |
className | string | — | Additional CSS classes to apply to the component |
HoverCardTrigger
Trigger element that activates the hover card This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
className | string | — | Additional CSS classes to apply to the component |
HoverCardContent
Content container for the hover card This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "top" | Side of the trigger where content appears |
align | "start" | "center" | "end" | "center" | Alignment of content relative to trigger |
sideOffset | number | 4 | Distance in pixels between trigger and content |
className | string | — | Additional CSS classes to apply to the component |