IHoverCard ​

A preview of what a link points at, shown when the pointer rests on it.

<IHoverCard>
  <template #trigger>
    <a href="/people/avery">Avery Lang</a>
  </template>

  <div class="flex gap-3">
    <IAvatar name="Avery Lang" size="lg" />
    <div class="space-y-1">
      <p class="text-sm font-medium">Avery Lang</p>
      <p class="text-xs text-muted-foreground">Staff engineer, Platform.</p>
    </div>
  </div>
</IHoverCard>

Which of the three ​

Three components anchor a panel to something on the page, and they are not interchangeable.

The line that matters is whether anything is lost by never seeing it. A hover card is summoned by hover or focus, so a touch user never gets one — nothing inside it may be the only route to an action or the only copy of a fact. Put a link in it by all means; do not put the only link in it.

Delays ​

openDelay is how long the pointer must rest before the card appears, and closeDelay is the grace period after it leaves. The second one is not padding: it is what lets the pointer travel from the trigger onto the card without the card disappearing under it.

<IHoverCard :open-delay="0">…</IHoverCard>
<IHoverCard :open-delay="1000" :close-delay="500">…</IHoverCard>

The defaults are 700ms and 300ms. Zero is worth avoiding on anything in a list: every trigger the pointer crosses on its way somewhere else will fire.

Placement ​

side, align and sideOffset work as they do on IPopover, and arrow draws the pointer against the trigger.

<IHoverCard side="top" arrow>…</IHoverCard>
<IHoverCard side="right" align="start">…</IHoverCard>

Size ​

width and padding match the popover's, and width="none" lets the content size itself — for a preview image, or anything that already knows how wide it is.

<IHoverCard width="lg">…</IHoverCard>

<IHoverCard width="none" padding="none">
  <div class="p-3">…</div>
</IHoverCard>

Controlling it ​

v-model:open works if you need the state, though a hover card rarely does — it is the one overlay that manages itself.

<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <IHoverCard v-model:open="open">
    …
  </IHoverCard>
</template>

Touch ​

enableTouch opens the card on a tap as well. It is off by default and worth leaving off: a tap has no hover before it, so the card ends up competing with whatever the trigger does when tapped — usually following a link. If the content matters on a phone, it belongs on the page rather than behind a gesture.

Props ​

Slots ​