useTooltip

Region-scoped coordination plugin for tooltip open/close delays. Holds shared openDelay / closeDelay / skipDelay defaults plus a registry of currently-open tooltip tickets so neighboring <Tooltip.Root> instances can skip their open delay during the warmup window.

Copy Markdown

Preview Intermediate Jun 25, 2026

Usage

import { createTooltipPlugin, useTooltip } from '@vuetify/v0'

// App-wide defaults
app.use(
  createTooltipPlugin({
    openDelay: 500,
    closeDelay: 150,
    skipDelay: 300,
  })
)

// Inside a component
const region = useTooltip()

region.openDelay.value          // 500
region.isAnyOpen.value          // false
region.shouldSkipOpenDelay()    // false until a tooltip opens

<Tooltip.Root> reads from useTooltip() automatically; you do not call this composable yourself unless you’re building a non-component consumer.

Architecture

Reactivity

Property	Type	Description
`openDelay`	`Readonly<Ref<number>>`	Default open delay in ms (700)
`closeDelay`	`Readonly<Ref<number>>`	Default close delay in ms (150)
`skipDelay`	`Readonly<Ref<number>>`	Skip-window after last close in ms (300)
`disabled`	`Readonly<Ref<boolean>>`	Region-wide disabled flag
`isAnyOpen`	`Readonly<Ref<boolean>>`	True when any registered tooltip is currently open
`shouldSkipOpenDelay`	`() => boolean`	Whether the next open should bypass the delay
`register`	`(input?: Partial<RegistryTicketInput>) => RegistryTicket`	Track a newly-opened tooltip
`unregister`	`(id: ID) => void`	Untrack a closed tooltip

Examples

A text-editor toolbar where every button shares one tooltip region. RegionProvider owns the writable delay state, passes those refs into createTooltipContext so the region tracks them reactively, and provides the context at the default v0:tooltip namespace — which is exactly where every Tooltip.Root reads its region from via useTooltip(). That single provide configures the open delay, close delay, skip window, and a region-wide disabled flag for the whole subtree at once, without touching any individual tooltip.

RegionControls is the payoff of the split: it injects the same writable settings to step the delays and flip the disabled toggle, and it reads the region back through useTooltip() to surface the live isAnyOpen flag and the resolved delays the toolbar actually sees. The warmup behavior is the headline — hover one button, wait out the open delay, then move to a neighbor while the first is still open and it opens instantly. The instant reveals are tinted via the data-[state=instant-open] hook so the skip-window coordination is visible, not just felt. Idle the toolbar past the skip window and the next hover pays the full delay again.

Reach for useTooltip() directly only when you are wiring a tooltip surface that does not go through the component family — most consumers should use Tooltip and let it call this composable internally. The delay and anchoring mechanics underneath come from useDelay and usePopover.

File	Role
`context.ts`	Defines the writable settings context plus the toolbar’s tool data
`RegionProvider.vue`	Owns the delay state, feeds it to `createTooltipContext`, and provides the region
`RegionControls.vue`	Injects the settings to adjust them and reads the region’s live state
`TooltipToolbar.vue`	Renders the buttons, each a `Tooltip.Root` reading the shared region
`tooltip-region.vue`	Wraps the provider around the controls and toolbar

Region settings

idle

Open delay

Wait before the first tooltip appears

700ms

Close delay

Wait before a tooltip hides

150ms

Skip window

Idle grace period for instant reopen

300ms

Every change feeds the shared region, so the resolved delays the toolbar reads are 700ms open / 150ms close, with a 300ms skip window.

Hover the first button and wait out the open delay. Move to a neighbor while it is still open and the next tooltip appears instantly, tinted to mark the skip-window reveal. Leave the toolbar idle past the skip window and the next hover pays the full delay again.

FAQ

Discord

Need help? Join our community for support and discussions ↗

API Reference

The following API details are for the useTooltip composable.

useTooltip

4 functions, 4 options, 5 properties, 3 methods