A short label that appears beside a control.
Import it from rei-kit/web:
import { BaseTooltip } from 'rei-kit/web'
Open BaseTooltip 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 { BaseButton } from 'rei-kit'
import { BaseTooltip } from 'rei-kit/web'
</script>
<template>
<BaseTooltip label="Copy link">
<BaseButton icon variant="ghost" aria-label="Copy link">⧉</BaseButton>
</BaseTooltip>
<!--
`follow` tracks the pointer, for a target big enough that a bubble pinned
to the middle would be nowhere near what is under the cursor. It falls
back to the anchored bubble for a keyboard and for anyone who asked their
system for less motion.
-->
<BaseTooltip label="Tuesday, 12 September — 3 entries" follow>
<div class="bg-muted rounded-card grid h-24 w-full place-items-center">A calendar cell</div>
</BaseTooltip>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
label | string | yes | The description. Already translated. |
placement | 'top' | 'bottom' | 'top' | |
follow | boolean | false | Track the pointer across the trigger instead of pinning to its middle. |
offset | number | 14 | How far the bubble sits from the pointer, in pixels. |
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.