Chapter 34: Preview Card

Core Idea

A hover-triggered "link preview" popup (the "hover over a link, see a rich preview" pattern popularized by social apps) — sighted mouse/keyboard-only by design, so the popup must never carry information unavailable on the destination page itself.

Key Concepts

• Usage guideline (critical): preview cards are inaccessible to touch and screen-reader users — never put unique/essential content only in the popup; treat it strictly as a visual enhancement of a link that's fully functional without it.
• Anatomy: Root → Trigger, Portal → Backdrop, Positioner → Popup → Arrow, Viewport. Notably smaller than Popover/Tooltip's anatomy — no Title/Description/Close parts, since the content is expected to be a rich preview, not a labeled dialog-like structure.
• Trigger.delay/closeDelay: hover intent timing is core here (there's no click-to-open variant implied by the anatomy) — tune both to avoid accidental triggers while scanning a page.
• Viewport: same content-transition part as Popover/Menu, for animating between different preview states if content changes.

Reference Tables

Part	Notable props	Notable data attributes
Root	open/onOpenChange, handle, actionsRef	—
Trigger	delay, closeDelay, handle, payload	data-popup-open
Positioner	same anchored-positioning family as Popover	data-anchor-hidden, data-align, data-side

Key Takeaways

1. Treat Preview Card content as strictly redundant with the linked page — if screen-reader/touch users would miss something important, that content doesn't belong exclusively in the card.
2. Tune delay/closeDelay generously (typically several hundred ms) — this is a hover-only interaction with no click fallback shown in the anatomy, so premature triggering while scrolling/scanning is the main UX risk.

Connects To

• ch033 (Popover): near-identical positioning anatomy; Popover is the general-purpose version, Preview Card is the link-hover-preview specialization with the accessibility caveat above.
• ch047 (Tooltip): another hover-triggered popup, for short text hints rather than rich preview content.