Hover Preview Card

HoverPreviewCard opens rich hover/focus content after a delay. Use it for link previews, user cards, repository cards, or entity summaries. If the content needs click-to-open behavior, use Popover instead.

Preview content has no role by default. Add ariaLabel only when content includes interactive controls and needs dialog semantics.

Anatomy

• #trigger: Element that opens the card on hover/focus. Use triggerProps on custom interactive triggers.
• #content: Rich preview content.

The root, trigger wrapper, floating content, and optional arrow are generated by the component.

Usage

<script setup lang="ts">
import { HoverPreviewCard } from "akaza-ui";
</script>

<template>
  <HoverPreviewCard>
    <template #trigger="{ triggerProps }">
      <a href="/profile" v-bind="triggerProps">Ada Lovelace</a>
    </template>
    <template #content>
      Profile preview
    </template>
  </HoverPreviewCard>
</template>

Examples

Custom delay

Use openDelay and closeDelay to tune hover behavior.

<template>
  <HoverPreviewCard :open-delay="300" :close-delay="100">
    <template #trigger>Hover me</template>
    <template #content>Preview</template>
  </HoverPreviewCard>
</template>

Controlled open state

Bind v-model when another interaction should own the card state.

<template>
  <HoverPreviewCard v-model="open">
    <template #trigger>Hover me</template>
    <template #content>Preview</template>
  </HoverPreviewCard>
</template>

Interactive and force-mounted content

Focus may move from trigger into teleported content without closing it. forceMount keeps closed content in DOM with hidden, inert, and closed-state hooks for custom transitions.

<HoverPreviewCard v-model="open" force-mount aria-label="Profile preview">
  <template #trigger="{ triggerProps }">
    <button v-bind="triggerProps">Open profile preview</button>
  </template>
  <template #content="{ close }">
    <a href="/profile">View profile</a>
    <button @click="close()">Close</button>
  </template>
</HoverPreviewCard>

API Reference

Props

Emits

Slots

UI Options

Styling Hooks

Popup entry and exit use a subtle side-aware structural transition. Override --akaza-hover-preview-card-duration to change its 120ms duration. Reduced-motion preference shortens it automatically.

Keyboard