Hover Card

A preview card that appears when a pointer rests on a link or keyboard focus reaches it.

Stable

Web

iOS

Android

@advui/core

Source

Profile preview

Preview

Code

Reviewed by @ada — hover or focus the name for a preview.

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { HoverCard, Text } from '@advui/core'

<HoverCard>
  <HoverCard.Trigger>
    <Text render="a" {...{ href: '/ada' }}>@ada</Text>
  </HoverCard.Trigger>
  <HoverCard.Content>
    <Text>Ada Lovelace — writes the first algorithms.</Text>
  </HoverCard.Content>
</HoverCard>

API reference

HoverCard

Prop	Type	Default	Description
`open`	`boolean`	—	Open state.
`defaultOpen`	`boolean`	—	Starting `open` when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	—	Called when the card opens or closes.
`openDelay`	`number`	`700`	Delay before opening on hover, in ms.
`closeDelay`	`number`	`300`	Delay before closing once the pointer leaves, in ms.
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Side of the trigger to open on.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Alignment along that side.

HoverCard.Trigger

Prop	Type	Default	Description
`children` required	`ReactElement`	—	One focusable element, usually a link to the full page.

HoverCard.Content

Takes View props to style the card; its width defaults to `72`.

Accessibility

The card is extra: everything in it must also be reachable by following the link, because touch screens have no hover and focus never moves into the card.
The trigger stays a plain link (no aria-expanded); while the card is open it describes the link (aria-describedby), so screen readers read it after the link name.
Keyboard focus on the trigger opens the card, and Escape closes it without moving focus (WCAG 1.4.13).
The card stays open while the pointer moves into it, so its text can be selected.

Keyboard interactions
Key	Action
`Tab`	Focusing the trigger opens the card; moving on closes it.
`Esc`	Closes the card.

Responsive behavior

The card flips to stay inside the viewport.

Platform notes

Web

Opens on hover after openDelay and on keyboard focus; a click follows the link.

iOS

Not rendered — touch has no hover and a press follows the link. Only the trigger is shown.