Hover Card

A headless, accessible hover card for showing rich preview content when a trigger is hovered or focused.

Features

Opens on pointer hover and keyboard focus of the trigger.
Closes on pointer leave, blur, or Escape.
Content is portalled and floated with collision-aware placement.
Configurable placement, offset, and optional arrow pointer.
Supports controlled and uncontrolled open state.
Works with any content

Installation

npm install @ariaui/hover-card

Examples

Rich preview anchored to the trigger on hover or focus—useful for profile cards, link previews, or extra context without navigation.

The trigger is a button by default. Styling follows semantic tokens (border-border, bg-background, text-muted-foreground, CalendarDaysIcon from @heroicons/react) aligned with the legacy doc example.

A headless, accessible hover card example.

Preview

No preview output yet.

live.tsxReady

Framer Motion

The base hover card profile animated through Framer Motion and asChild composition.

Preview

No preview output yet.

live.tsxReady

Anatomy

tsx

import * as HoverCard from "@ariaui/hover-card";

export default function Example() {
  return (
    <HoverCard.Root>
      <HoverCard.Trigger />
      <HoverCard.Content />
    </HoverCard.Root>
  );
}

API Reference

Root

Context provider. Manages open state, positioning, and floating element reference.

Prop	Type	Default
open	boolean	—
defaultOpen	boolean	false
onOpenChange	(open: boolean) => void	—
placement	'top' \| 'right' \| 'bottom' \| 'left' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'right-start' \| 'right-end' \| 'left-start' \| 'left-end'	'bottom'
offset	number	8

Trigger

The interactive element that opens the hover card on hover or focus. Renders a button by default.

Attribute	Values
type	button

Content

The floating content panel. Rendered in a portal and positioned relative to the trigger. Unmounted when closed.

Prop	Type	Default
arrow	boolean	false
arrowClassName	string	—
asChild	boolean	false

Attribute	Values
role	tooltip

Keyboard

Shortcut	Action
`Tab`	Move focus to the trigger. Focusing the trigger opens the hover card.
`Shift`+`Tab`	Move focus to the previous focusable element. Blurring the trigger closes the hover card.
`Esc`	Close the hover card when open.

Accessibility

Hover Card complements — but does not replace — primary navigation or required information. Content revealed on hover must always be available through other means.

Trigger renders as a button and opens the card on both pointer hover and keyboard focus, ensuring keyboard parity with pointer users.
Content renders inside a portal with role="tooltip".
The card closes when the pointer leaves both the trigger and content, when the trigger loses focus, or when Escape is pressed.
Do not put required interactive controls inside Content — use a Popover or Dialog for content that users must reach with a keyboard.