HoverCard
Hover and focus preview surface for richer context tied to a nearby trigger.
Best for
Import
import { HoverCard } from "@enadhq/enad-react-sdk/client/ui-resolver"When to use it
Use HoverCard when a trigger needs richer context than a tooltip but the content is still secondary. It fits profile previews, product summaries, and metadata details that help visitors decide whether to click through.
Do not put critical information only inside a hover card. The content should enhance the nearby trigger, not replace the main page flow.
Slot strategy
HoverCardis the stateful root.HoverCardTriggerdefines the hover and focus target.HoverCardContentholds the preview surface.
Keep the trigger simple and the content concise. A hover card should feel like a quick preview, not a miniature page.
Behavior and theming guidance
Use width classes on HoverCardContent to match the amount of detail you need. Product previews usually need a little more width than profile snippets because they include imagery and pricing.
Keep actions light. A single follow-up link can work, but if the surface starts to need several controls or a committed decision, move that interaction to a popover, dialog, or sheet.
Examples
Live examples you can edit directly in the sandbox.
Profile preview
Use hover cards when a compact trigger benefits from a little more context, like an author or account summary.
Product summary
A richer preview can show image, short copy, and pricing without forcing a full navigation step.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.