MiHCM
overlay/@mihcm/ui·v0.21.0·stable

HoverCard

Preview card that appears on hover. Ideal for user profile previews and link details. Powered by Radix.

ConfiguratorExamplesUsageAccessibilityApi

Use cases

  • User profile preview — hover over a username to see a profile card with bio, role, and avatar.
  • Link preview — preview the destination of a link before navigating.
  • Detail tooltip — show richer content than a standard tooltip (multiple lines, structured data).

When NOT to use

  • Touch-only interfaces — hover is not available on mobile. Use a tap-to-reveal pattern instead.
  • Critical information — anything the user must see. Hover content is easily missed.
  • Interactive content inside the card — if the card contains buttons/links, prefer Popover with click trigger.

Key props

PropTypeDescription
timing'instant' | 'fast' | 'normal' | 'slow'Delay preset for open/close timing.
openDelaynumberMilliseconds before the card appears (default 700).
closeDelaynumberMilliseconds before the card hides (default 300).
open / defaultOpenbooleanControlled or uncontrolled visibility.
onOpenChange(open: boolean) => voidObserve/control visibility changes.
size'sm' | 'md' | 'lg' | 'auto'Width preset for HoverCardContent.
variant'default' | 'soft' | 'outline' | 'elevated' | 'plain'Content surface style.
padding'none' | 'sm' | 'md' | 'lg'Content spacing preset.
side / alignRadix placement propsPosition the card around the trigger.
collisionPaddingnumberViewport collision padding.
portalbooleanRender content in a portal for clipping containers.
showArrowbooleanRender a tokenized placement arrow.
maxHeight / scrollablepreset / booleanConstrain and scroll long previews.

Anatomy

<HoverCard>
  <HoverCardTrigger asChild>
    <a href="/profile">@yashi</a>
  </HoverCardTrigger>
  <HoverCardContent>
    <p>Card content</p>
  </HoverCardContent>
</HoverCard>

Content styling

HoverCardContent renders a tokenized card with configurable surface, padding, max height, optional arrow, and animated entrance/exit. Pass size, side, align, sideOffset, and collisionPadding to control width and placement.

Composition

  • Wrap the trigger element in HoverCardTrigger — it must be a single focusable child.
  • Content appears on hover and focus. It stays visible while the cursor is over the card.
  • Keep content read-only. For interactive content (buttons, links), use Popover.
  • Use timing for common delay presets. Override with openDelay and closeDelay when a product workflow needs exact timings.
  • Use portal when the trigger sits inside a clipped table, scroll area, or card.
  • Use maxHeight with scrollable for long previews instead of letting the card grow past the viewport.
  • Tooltip — simpler, text-only hover label.
  • Popover — click-triggered overlay with interactive content.
  • Card — static content container.