Tooltip

Headless description tooltip with hover and focus triggers, configurable open/close delays, region-scoped skip-window coordination, and optional interactive-content mode.

Copy Markdown

PreviewRenderlessIntermediate Jun 25, 2026

Usage

<script setup lang="ts">
  import { Tooltip } from '@vuetify/v0'
</script>

<template>
  <div class="flex justify-center p-12">
    <Tooltip.Root :close-delay="200" :open-delay="500">
      <Tooltip.Activator
        class="px-3 py-1 rounded border border-divider bg-surface text-on-surface hover:bg-surface-tint"
      >
        Hover me
      </Tooltip.Activator>

      <Tooltip.Content
        class="px-2 py-1 rounded text-xs bg-on-surface text-surface shadow-md"
        :style="{ margin: '6px 0' }"
      >
        Helpful description
      </Tooltip.Content>
    </Tooltip.Root>
  </div>
</template>

Anatomy

vue

<script setup lang="ts">
  import { Tooltip } from '@vuetify/v0'
</script>

<template>
  <Tooltip.Root>
    <Tooltip.Activator />
    <Tooltip.Content />
  </Tooltip.Root>
</template>

A single tooltip hides one of v0’s better tricks: the createTooltipPlugin registry coordinates every tooltip in the app from one place. Hover a toolbar button and wait out the open delay, then slide to a neighbor — it opens instantly, because the shared region is already warm. Without the plugin each tooltip would re-wait its own delay on every move, so the toolbar would feel sluggish. That shared skip-window is exactly why open and close timing lives in one plugin instead of per-tooltip state.

The Link control adds interactive: its content stays open while you move the pointer in to copy the URL, and Copy flips to a bg-success / text-on-success confirmation that stays legible in both light and dark themes. Reach for interactive only when the content genuinely needs pointer access — the strict WAI-ARIA APG tooltip pattern forbids focusable content, so a richer surface may belong in a future HoverCard instead.

File	Role
`TooltipButton.vue`	Reusable wrapper pairing a `Button` activator with its tooltip
`toolbar.vue`	Formatting toolbar wiring several coordinated tooltips plus one interactive `Link`

Hover a button and wait, then glide to its neighbors — they open instantly. One tooltip plugin keeps the whole toolbar's region warm, so only the first hover waits the open delay.

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>`