Overlays

Hover Card

A short profile or context card shown on hover and keyboard focus.

BetaNew shared patternRegistry JSON

Assigned to on the billing migration.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add hover-card

Writes components/ui/hover-card.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/ui/hover-card";

Props and composition points for Hover Card. Native element props pass through.

Prop	Type	Default	Description
`open / defaultOpen / onOpenChange`	`boolean / boolean / (open: boolean) => void`	None	Controlled or uncontrolled visibility, usually left to hover and focus.
`openDelay / closeDelay`	`number`	700 / 300	Milliseconds before opening or closing. Keep the open delay long enough to avoid accidental cards.
`HoverCardContent align / sideOffset`	`"start" \| "center" \| "end" / number`	"center" / 8	Placement relative to the trigger.
`aria-label / aria-labelledby`	`string`	None	Names the floating content when it has no visible heading. Pair it with the trigger's accessible name.

Dependencies: radix-ui, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

The card supplements the trigger; it must never be the only way to reach essential information or an action.
Radix opens on hover and keyboard focus, so a focusable trigger (link or button) is required. Touch users cannot hover: make the same destination reachable by tapping the trigger.
Keep the content short and non-interactive. Interactive content belongs in Popover, where focus and dismissal are explicit.
Give the content a name when it contains a distinct subject, and keep the trigger text meaningful without the card.

HoverCard has no built-in close button and is not a dialog. Do not place destructive actions or required form controls inside it.

The Aback products whose interfaces shaped this component.

This component is new in Aback UI. It has not shipped in an Aback product yet, so no production use is claimed.