A card that appears beside something when you rest on it.
Import it from rei-kit/web:
import { BaseHoverCard } from 'rei-kit/web'
Open BaseHoverCard in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { BaseAvatar, BaseButton } from 'rei-kit'
import { BaseHoverCard } from 'rei-kit/web'
</script>
<template>
<BaseHoverCard label="About Ramazan">
<template #default="{ props }">
<BaseButton variant="link" v-bind="props">@ramazandogna</BaseButton>
</template>
<template #card>
<div class="flex gap-3">
<BaseAvatar label="Ramazan Dogan" />
<div>
<p class="text-ink text-sm font-medium">Ramazan Dogan</p>
<p class="text-ink-soft mt-1 text-xs leading-relaxed">
Builds rei-kit and three apps on it.
</p>
</div>
</div>
</template>
</BaseHoverCard>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
label | string | yes | Names the card for a screen reader. Already translated. |
openDelay | number | 300 | How long a pointer has to rest before it opens, in ms. |
closeDelay | number | 200 | How long it survives the pointer leaving, so the card can be reached. |
placement | 'top' | 'bottom' | 'bottom' | Which side it prefers. It opens on the other when there is more room there. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.