Tooltip
Headless description tooltip with hover and focus triggers, configurable open/close delays, region-scoped skip-window coordination, and optional interactive-content mode.
Usage
Anatomy
<script setup lang="ts">
import { Tooltip } from '@vuetify/v0'
</script>
<template>
<Tooltip.Root>
<Tooltip.Activator />
<Tooltip.Content />
</Tooltip.Root>
</template>Architecture
Examples
Accessibility
| Concern | Behavior |
|---|---|
| Role | Content renders role="tooltip" |
| Linkage | Activator always carries aria-describedby={contentId} so screen readers announce the description on focus |
| Keyboard | Focus opens instantly (no delay), Escape closes; Enter / Space activate the underlying control, which closes via click |
| Touch | Tooltips are not shown on touch interactions per the WAI-ARIA APG |
| Hoverable content | Off by default; opt-in with interactive on <Tooltip.Root> |
FAQ
Touch devices have no hover state, and showing a tooltip on tap competes with whatever action the underlying control performs. Both React Aria and the WAI-ARIA Authoring Practices Guide recommend skipping tooltips on touch and ensuring the UI is usable without them. v0 follows this guidance.
Two layers, and the narrower one wins. App-wide: install the plugin — app.use(createTooltipPlugin({ openDelay: 500, closeDelay: 150 })). One tooltip: set props on its Root — <Tooltip.Root :open-delay="0">. Warmup coordination stays shared across every tooltip through the plugin registry. With no plugin installed it still works, falling back to the documented defaults.
The activator gates focus-driven opens on :focus-visible. A pointer click that incidentally moves focus into the activator does not match :focus-visible, so it doesn’t open the tooltip. Keyboard-driven focus (Tab) sets :focus-visible and opens the tooltip instantly.
The activator defaults to as="button"; pass as="a", as="div", etc. to render a different element. Always ensure the activator is keyboard-focusable (tabindex="0" on a non-button if needed).