DocsDocsSDKs

HoverCard

React SDK guidance for HoverCard.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

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

  • HoverCard is the stateful root.
  • HoverCardTrigger defines the hover and focus target.
  • HoverCardContent holds the preview surface.

Keep the trigger simple and the content concise. A hover card should feel like a quick preview, not a miniature page.

Plan for keyboard and touch fallbacks

Hover cards also open from focus, so make sure the trigger still makes sense for keyboard users. On touch-first surfaces, the same information often needs a visible inline fallback or a different interaction pattern.

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.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/ui-resolver.
  • Playground route: /sandbox?component=HoverCard.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

HoverCard

# HoverCard > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/ui-resolver`. - Live playground: [/components/base-ui/hover-card](https://sdk.enad.io/components/base-ui/hover-card). ## 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 - `HoverCard` is the stateful root. - `HoverCardTrigger` defines the hover and focus target. - `HoverCardContent` holds the preview surface. Keep the trigger simple and the content concise. A hover card should feel like a quick preview, not a miniature page. > **Plan for keyboard and touch fallbacks** > > Hover cards also open from focus, so make sure the trigger still makes sense for keyboard users. > On touch-first surfaces, the same information often needs a visible inline fallback or a different > interaction pattern. ## 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. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/ui-resolver`. - Playground route: /sandbox?component=HoverCard. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes