Overlays · Application UI
Hover Card
A compound component that displays a floating preview card when hovering over a trigger element, built on Base UI's PreviewCard primitive.
Feature showcase
Installation
Features
6 examples
Default, Alignment, Controlled, Placement, Rich Content, With Delay.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "bottom" | "left" | "right" | "inline-start" | "inline-end" | "bottom" | Which side of the trigger the card appears on (HoverCardContent only). |
| sideOffset | number | 4 | Distance in pixels between the trigger and the card (HoverCardContent only). |
| align | "start" | "center" | "end" | "center" | Alignment of the card relative to the trigger (HoverCardContent only). |
| alignOffset | number | 4 | Offset in pixels along the alignment axis (HoverCardContent only). |
| className | string | - | Additional CSS class names to apply to the popup element (HoverCardContent only). |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/hover-card.tsx |
| Default example | content/examples/hover-card/default.tsx |
| Alignment example | content/examples/hover-card/alignment.tsx |
| Controlled example | content/examples/hover-card/controlled.tsx |
| Placement example | content/examples/hover-card/placement.tsx |
| Rich Content example | content/examples/hover-card/rich-content.tsx |
| With Delay example | content/examples/hover-card/with-delay.tsx |