A rich preview card that appears on hover or keyboard focus.

Composes a trigger with a floating content card. Shows on hover after a configurable delay, hides after a close delay. Useful for user profiles, item previews, or any contextual detail that shouldn't require a click.

Reuses the shared [data-popover] positioning system — same data-side and data-align semantics as Popover and Tooltip.

Examples

<.hover_card id="user-card">
  <:trigger>
    <.button variant="link">@jane</.button>
  </:trigger>
  <div class="flex items-center gap-3">
    <.avatar src="/jane.jpg" initials="JC" />
    <div>
      <p class="font-medium">Jane Cooper</p>
      <p class="text-sm text-muted-foreground">@jane · Designer</p>
    </div>
  </div>
</.hover_card>

<.hover_card id="release-card" side="top" align="start">
  <:trigger>Release notes</:trigger>
  <div>
    <p class="font-medium">v0.4.0</p>
    <p class="text-sm text-muted-foreground">New display primitives.</p>
  </div>
</.hover_card>

Attributes

• id - Required. Unique identifier.
• side - Side to place the card: top, bottom, left, right, or auto (dynamic viewport-aware placement). Defaults to bottom.
• align - Alignment relative to the trigger: start, center, end. Defaults to center.
• open_delay - Open delay in milliseconds. Defaults to 150.
• close_delay - Close delay in milliseconds. Defaults to 100.
• class - Additional CSS classes for the content card.

Slots

• :trigger - Required. The hover/focus target.
• :inner_block - Required. The hover card content.

Accessibility

• The trigger sets aria-expanded and aria-describedby linking to the card.
• The card uses role="tooltip" for non-modal descriptive preview content and toggles aria-hidden.
• Opens on both mouseenter and focusin — keyboard users get the same preview as mouse users.
• Escape key closes the card.