Hover Card

Hover preview for extra context without leaving the page.

Installation

Props

HoverCard

Stateful wrapper that opens a callout on delayed hover or immediate focus, then closes it once pointer and focus both leave the hover-card region.

childrenReactNode

Required

Composition surface for the trigger and content primitives rendered inside the hover card root.

classNamestring

Merged onto the inline-flex wrapper that groups the trigger and content primitives.

openDelaynumber

Default 80

Delay in milliseconds before the card opens after pointer entry. Keyboard focus opens immediately.

closeDelaynumber

Default 120

Delay in milliseconds before the card closes after pointer exit. Blur closes immediately unless focus is still moving within the card.

Open state is internal only. This implementation does not expose a controlled open prop or state-change callback.

The root keeps the original hover and focus timing, while Radix Hover Card handles portal-based positioning and collision-aware placement.

Pending timers are cleared before every new open or close request and again during unmount cleanup.

HoverCardTrigger

Trigger surface that renders a button by default or forwards behavior into a custom child through Radix Slot.

childrenReactNode

Required

Interactive content rendered by the trigger or by the child passed through asChild.

asChildboolean

Lets you supply your own trigger element while keeping the hover-card trigger behavior and class merging.

classNamestring

Merged onto the rendered trigger element for local layout or visual styling.

When asChild is false, the component renders a plain button with type='button', a larger default hit area, and a visible focus ring.

The trigger is also used as the positioning anchor and automatically receives aria-expanded, aria-controls, and aria-haspopup.

Standard button props such as disabled, onClick, aria-*, and data-* are forwarded to the rendered trigger element.

HoverCardContent

Animated content panel with collision-aware positioning, side and align controls, and a spring-driven scale and directional offset fade.

childrenReactNode

Required

Content rendered inside the hover card panel.

classNamestring

Merged onto the motion.div panel so width, spacing, or surface styles can be adjusted.

side"top" | "right" | "bottom" | "left"

Default "bottom"

Preferred side for the panel before collision handling adjusts the placement.

align"start" | "center" | "end"

Default "center"

Horizontal or vertical alignment relative to the trigger, depending on side.

sideOffsetnumber

Default 12

Gap between trigger and panel. The component also extends an invisible hover bridge through that gap to reduce accidental closes.

alignOffsetnumber

Default 0

Additional offset applied along the alignment axis.

avoidCollisionsboolean

Default true

Enables Radix collision handling so the card can shift or flip when space is tight.

collisionPaddingnumber | Partial<Record<Side, number>>

Default 12

Padding from viewport edges used during collision detection.

Additional motion.div props such as style, role, onClick, aria-*, and data-* are forwarded, but initial, animate, exit, and transition are reserved by the component.

The panel is portaled through Radix Hover Card content, while preserving the same spring-driven scale and directional offset animation.

Focus can move from the trigger into interactive content without immediately closing the card.

By default the content is centered below the trigger with a fixed w-72 width, no drop shadow, and a 12px hover bridge across the trigger-to-panel gap.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @radix-ui/react-hover-card, @radix-ui/react-slot, motion.

Uses the dedicated Radix Hover Card primitive instead of Radix Popover for the floating surface.

Preserves the original delayed hover reveal, instant focus open, and spring-driven content motion.

The generated registry file is /r/r-hover-card.json.