Chapter 19: Hover Card

Core Idea

Shows a content preview on hover over a link, for sighted mouse users only — intentionally inaccessible to screen readers, since hover-triggered content has no reliable non-visual equivalent.

Key Concepts

• Anatomy: Root → Trigger (a link) → Portal → Content (+ Arrow), same positioning props (side/align/collision) as Popover/DropdownMenu.
• openDelay/closeDelay (default 700/300): debounce hover intent so brief cursor passes don't trigger the card.
• Screen-reader exclusion is intentional: this is documented, not a bug — for accessible equivalents, expose the same content via a real link/page instead of relying on hover discovery.

Reference Tables

CSS Variable	Purpose
--radix-hover-card-trigger-width / -content-available-height	constrain content to trigger width / remaining viewport height
--radix-hover-card-content-transform-origin	origin-aware open animation

Key Takeaways

1. Set openDelay={0} for instantaneous previews (e.g. in a trusted internal tool), but keep the default delay for public-facing content to avoid accidental triggers.
2. Because it's excluded from the accessibility tree, never put the only copy of essential content inside a HoverCard — treat it strictly as a supplementary preview.
3. Shares its entire positioning/animation API (side, align, collision, CSS variables) with Popover — if you've styled one, the other is nearly free.

Connects To

• Popover: same Content positioning API, but click-triggered and keyboard/screen-reader accessible.
• Tooltip: another hover-triggered primitive, but for short text hints rather than rich preview content.