HoverCard Primitive

Headless, unstyled hover card primitive with positioning and delay controls.

AsChild Pattern

Use AsChild to compose triggers with your own styled elements.

Without AsChild

HoverCardTrigger renders its own div element.

Hover me

With AsChild

Button receives hover/focus behavior via TriggerContext.

Basic Usage

Hover over the trigger to show the hover card. Content appears after a delay.

Hover me

Custom Delays

Control the open and close delays in milliseconds.

Quick (200ms)
Slow (1000ms)

Positioning

Control where the hover card appears relative to the trigger.

Bottom (default)
Top
Right
Left

Alignment

Control the alignment of the hover card relative to the trigger.

Start Aligned
Center Aligned
End Aligned

Rich Content Example

Hover cards can contain any content including images, links, and formatted text.

Hover over

@username

to see their profile.

Accessibility Features

Interaction

  • Hover over trigger to show content (with configurable delay)
  • Move mouse away to hide content (with configurable delay)
  • Focus trigger with keyboard to show content immediately
  • Blur to hide content (with delay)
  • Hover over content to keep it open

ARIA Attributes

  • role="dialog" on content container
  • aria-describedby links content to trigger
An unhandled error has occurred. Reload 🗙