Overlays/Hover Card
Hover Card
A floating panel that appears when hovering or focusing a trigger element, after a short delay. Ideal for previews of users, links, or other rich content.
import { HoverCard } from "@animui/ui"Basic
Placement
Custom delays
Props
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | React.ReactNode | — | The element that opens the card on hover or focus. |
children | React.ReactNode | — | Content rendered inside the floating card. |
openDelay | number | 150 | Milliseconds to wait before opening after hover starts. |
closeDelay | number | 200 | Milliseconds to wait before closing after hover ends. |
placement | "top" | "bottom" | "left" | "right" | "bottom" | Which side of the trigger the card appears on. |
className | string | — | Additional classes for the card panel. |
Accessibility
- ✓Opens on keyboard focus and closes on blur, not just mouse hover.
- ✓Dismissible with the
Escapekey. - ✓Moving the pointer from the trigger onto the card keeps it open.