HoverCard

A preview card shown on hover or focus of a link, for sighted pointer users.

Import
import { HoverCardRoot, HoverCardTrigger, HoverCardContent } from '@texuli/primitives/hover-card';
Pattern
Non-modal preview (no APG pattern)
Size budget
16.0 KiB gzip for @texuli/primitives/hover-card
Reference
packages/primitives/docs/prim-hover-card.md

Live demo

Loading the HoverCard demo…

Anatomy

HoverCard anatomy: each box holds the parts inside it.
  • HoverCardRoot
    • HoverCardTrigger
    • HoverCardContent

Behavior checks

tests/behavior/scenarios/hover-card.spec.ts runs 6 rows against the HoverCard scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 6 rows
  1. hover opens the named preview after a delay
  2. focus opens the preview and Escape closes it without moving focus
  3. moving from trigger into the card keeps it open until both are left
  4. an outside pointer interaction dismisses the preview
  5. touch opens and a second touch closes the preview
  6. the open preview has no axe violations

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 16.0 KiB gzip for @texuli/primitives/hover-card (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).