Hover Card

Supplementary context beside a real link, available through hover, focus or an explicit preview.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Alex Morgan

Sample member · Product designer. The profile link and visible preview button also work without hover.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add hover-card

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<HoverCard>
  <HoverCardTrigger href="/members/alex">Alex Morgan</HoverCardTrigger>
  <HoverCardToggle aria-label="Preview Alex Morgan">Preview</HoverCardToggle>
  <HoverCardContent>
    <HoverCardTitle>Alex Morgan</HoverCardTitle>
    <p>Product designer · Sample member</p>
  </HoverCardContent>
</HoverCard>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`open / defaultOpen / onOpenChange`	`boolean / boolean / (boolean) => void`	`uncontrolled / false`
`openDelay / closeDelay`	`milliseconds`	`600 / 300`
`Content: side / align`	`top \| right \| bottom \| left / start \| center \| end`	`bottom / start`
`Content: sideOffset / collisionPadding`	`pixels`	`8 / 8`

Accessibility

A supplementary read-only region; the anchor keeps its real href and essential information stays visible. Hover opens after 600ms, focus opens immediately, leaving both trigger/content closes after 300ms. Content can be hovered and text selected. Escape dismisses only the top floating layer without moving focus. HoverCardToggle provides explicit touch access. Root has no DOM ref; Trigger forwards an anchor ref, Toggle a button ref, Content a div ref, Title a heading ref. One named content region per root; supply Title or aria-label. Put modal compositions inside their dialog. Native popover support is required; do not put essential actions in the preview.