Components / Overlays

Hover Card

A preview panel opened by hover, focus, or click.

Preview

Install

Run in your project

npx @getweini/cli@latest add hover-card

Use cases

Person preview

Show brief contextual information without opening a full profile.

Project summary

Let readers inspect metadata while keeping the underlying navigation available.

Usage example

Vue

<script setup lang="ts">
import HoverCard from './components/ui/hover-card/HoverCard.vue'
</script>
<template>
  <HoverCard trigger="Project details" label="Project preview">
    <strong>Design system</strong>
    <p>Shared components and tokens</p>
  </HoverCard>
</template>

More examples

Person summary

The trigger remains a button and the panel has its own name.

Person summary

<script setup lang="ts">
import HoverCard from './components/ui/hover-card/HoverCard.vue'
</script>
<template>
  <HoverCard trigger="Avery Lee" label="Avery Lee profile preview">
    <h3>Avery Lee</h3>
    <p>Design lead · Luxembourg</p>
  </HoverCard>
</template>

Project preview

Align a wider card with its trigger.

Project preview

<script setup lang="ts">
import HoverCard from './components/ui/hover-card/HoverCard.vue'
</script>
<template>
  <HoverCard trigger="Design system" label="Design system preview" :width="360" align="start" side="bottom">
    <h3>Design system</h3>
    <p>Shared components, patterns, and tokens.</p>
  </HoverCard>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Hover Card
Name	Type	Default or requirement
`v-model:open`	boolean	false
`trigger / #trigger`	string / slot	one required
`label`	string	required
`openDelay / closeDelay`	milliseconds	500 / 200
`width / gap / align / side`	placement options	320 / 8 / center / bottom

Use a button for previews that must work on touch. Escape closes and restores trigger focus; custom triggers bind all provided props.

Implementation notes

Focus or click opens immediately; pointer hover uses openDelay and pointer leave uses closeDelay.
Essential information should also be accessible through normal navigation, especially on touch devices.

Accessibility and localization

Provide the panel label in the application’s language.
Escape closes and restores focus to the trigger.