Hover Card
Hover Card
For sighted users to preview content available behind a link.
Default
Hover over the trigger to display additional content.
Hover over
@nextjs
for more information.
AsChild Pattern
Use AsChild to compose triggers with your own styled elements.
Without AsChild
HoverCardTrigger renders its own div element.
@username
With AsChild
Button receives hover/focus behavior via TriggerContext.
User Profile Card
Common use case for showing user information on hover.
Article written by
@johndoe
on January 15, 2024.
Product Preview
Show product details on hover.
View Product
Another Product
Definition Tooltip
Provide definitions or explanations for technical terms.
The component uses
Floating UI
for intelligent positioning with automatic collision detection and
ARIA attributes
for screen reader compatibility.
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| OpenDelay | int | 700 | Delay in milliseconds before the card opens on hover. |
| CloseDelay | int | 300 | Delay in milliseconds before the card closes. |
| Side | string? | — | The preferred side to show the card. Options: top, right, bottom, left. |
| Align | string? | — | Alignment relative to the trigger. Options: start, center, end. |
| ChildContent | RenderFragment? | — | Nest HoverCardTrigger and HoverCardContent here. |