Basic
Hover for detailsUser Profile
@usernameSides
Sub-components
| Component | Description |
|---|---|
| HoverCard | Root provider (controls open/close state and delays) |
| HoverCard.Trigger | The element that triggers the hover card |
| HoverCard.Content | The card displayed on hover |
Content Props
| Prop | Type | Description |
|---|---|---|
| side | "top" | "right" | "bottom" | "left" | Preferred side to render against the trigger |
| sideOffset | number | Distance in pixels from the trigger (default: 4) |
| align | "start" | "center" | "end" | Alignment against the trigger (default: center) |
| openDelay | number | Delay in ms before the hover card opens (Root prop, default: 700) |
| closeDelay | number | Delay in ms before the hover card closes (Root prop, default: 300) |
| className | string | Additional classes on the hover card content |
Usage
<HoverCard>
<HoverCard.Trigger asChild>
<a href="#">Hover me</a>
</HoverCard.Trigger>
<HoverCard.Content side="bottom">
<p>Preview content here.</p>
</HoverCard.Content>
</HoverCard>