A popover card that appears on hover to preview additional content without navigating away.
Import the HoverCard component and access all parts using dot notation.
import {HoverCard} from "@heroui-pro/react";
<HoverCard>
<HoverCard.Trigger />
<HoverCard.Content>
<HoverCard.Arrow />
</HoverCard.Content>
</HoverCard>.hover-card__trigger - Inline wrapper around the trigger element.hover-card__content - The floating panel that appears on hover.hover-card__arrow - Optional pointing arrow connecting content to trigger[data-entering="true"] / [data-exiting="true"] on .hover-card__content (fade + zoom + slide animation). Skipped when swapping between cards during the shared warm-up window.[data-placement="top|bottom|left|right"] on .hover-card__content and .hover-card__arrow (directional animations and arrow rotation)HoverCard is built on RAC PreviewTrigger, so it works across input methods:
openDelay. A safe area between the trigger and the card keeps it open while the pointer travels toward it, even diagonally.Tab moves focus into it, and Escape closes it.The card renders with role="dialog". Pass aria-label to HoverCard.Content to give it an accessible name.
Delays are coordinated globally with other hover cards and tooltips: once one has opened, the next one opens immediately instead of waiting out its openDelay again.
The root component. Wraps RAC PreviewTrigger to manage hover state and open/close timing.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | Controlled open state |
defaultOpen | boolean | - | Default open state (uncontrolled) |
onOpenChange | (open: boolean) => void | - | Callback when open state changes |
openDelay | number | 700 | Time in ms before opening after hover |
closeDelay | number | 300 | Time in ms before closing after pointer/focus leave |
isDisabled | boolean | false | Prevents the hover card from opening |
children | ReactNode | - | Trigger and Content elements |
Inline wrapper that tracks hover, focus, and long press on its children.
Also supports all native span HTML attributes.
The floating panel. Wraps RAC Popover.
| Prop | Type | Default | Description |
|---|---|---|---|
placement | Placement | 'top' | Popover placement relative to the trigger |
offset | number | 8 | Distance from the trigger |
Also supports all RAC Popover props except the open state ones (isOpen, defaultOpen, onOpenChange) and triggerRef, which are owned by the root.
Optional pointing arrow. Wraps RAC OverlayArrow. Renders a default SVG arrow when no children are provided.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Custom arrow element |
Also supports all RAC OverlayArrow props.