Hover Card

A rich preview that opens on hover/focus of the trigger (e.g. profile hovercards), with open/close delays.

@ada

<span
  data-controller="zag-hover-card"
  data-zag-hover-card-open-delay-value="200"
  class="relative inline-block"
>
  <a data-part="trigger" href="#" class="text-primary font-medium underline">@ada</a>
  <div data-part="positioner">
    <div
      data-part="content"
      hidden
      class="border-border bg-popover z-50 w-64 rounded-lg border p-4 shadow-lg"
    >
      <div class="flex items-center gap-3">
        <span
          class="bg-primary/10 text-primary grid h-10 w-10 place-items-center rounded-full font-semibold"
          >AL</span
        >
        <div>
          <p class="text-sm font-semibold">Ada Lovelace</p>
          <p class="text-muted-foreground text-xs">First programmer</p>
        </div>
      </div>
    </div>
  </div>
</span>

Parts

trigger, positioner, arrow, arrow-tip, content.

Values

Attribute	Type	Default	Description
data-zag-hover-card-open-value	Boolean	false	Open by default.
data-zag-hover-card-open-delay-value	Number	700	Delay (ms) before opening.
data-zag-hover-card-close-delay-value	Number	300	Delay (ms) before closing.
data-zag-hover-card-placement-value	String	"bottom"	Popper placement.
data-zag-hover-card-gutter-value	Number	8	Gap (px) between trigger and content.

Events

Emits zag-hover-card:change — detail is { open }.

Programmatic control

open(), close(), isOpen.