.' children: - name: Tooltip.Arrow description: 'Renders a

pointing back at the trigger.' --- :: ```vue ``` ## Examples ### Wrapping a control you already have The trigger has to stay the element the reader focuses, so pass `asChild` and the button you were going to render anyway keeps its own type, its own handler and its place in the tab order. ```vue ``` ### Sharing the timings across a group Every timing belongs to `Tooltip.Root`. To give a row of tooltips the same ones, declare the options once and bind that object to each root. ```vue ``` `Tooltip.Group` owns one timing of its own. It stays warm for `timeout` milliseconds after its last tooltip closed, and a tooltip opening inside that window skips its `delay` entirely and says so with `data-instant="delay"`. ```vue ``` Give one root an object of its own to take it out of the shared timings. ```vue ``` ### Positioning `Tooltip.Content` positions itself against the trigger, steered by the `floating` keys on the root’s `options`; the options table below lists every one of them. The resolved placement comes back as `data-side` and `data-align`; read those rather than the options you passed, since flipping can change either one. ```vue ``` Pass `anchor` to position against something else, and pass any of the eight floating keys straight to the content to override the options for one instance. ```vue ``` The content writes `--rack-floating-anchor-width`, `--rack-floating-anchor-height`, `--rack-floating-available-width`, `--rack-floating-available-height` and `--rack-floating-transform-origin` onto the floating box, which is why an unstyled popup is never wider than the space beside its trigger. ### Where the popup renders The content teleports to the end of ``, which is what keeps a popup out of a scroll container that would otherwise clip it. Turn it off and the boxes render where the content sits. ```vue ``` ### Following the cursor Set `trackCursorAxis` and the popup moves with the pointer along that axis while staying anchored to the trigger on the other one. It is worth it on a wide target, like a chart column or a timeline row, where the trigger’s centre is a long way from where the reader is looking. ```vue ``` The popup is measured against the pointer on the tracked axis and against the trigger on the other, so collision handling and an arrow both follow the point the popup is pinned to. ### Styling from state Every part writes its state to `data-*`, so style it with attribute selectors. `data-instant` says the tooltip skipped its wait, which is usually a reason to skip the animation too. ```css .popup[data-state='open'] { animation: fade-in 120ms ease-out; } .popup[data-instant] { animation-duration: 0ms; } .arrow[data-side='top'] { top: 100%; rotate: 180deg; } ``` The content’s three boxes are not parts, so they are reached by their `data-scope` or by the class each one ships. A `class` on `Tooltip.Content` is applied to the popup, the box you paint. ```vue ``` ```css .mirror-tooltip-floating { --mirror-tooltip-floating-z-index: 80; } [data-scope='backdrop'] { background: rgb(0 0 0 / 0.2); } ``` ### Reaching the tooltip from anywhere Give the root an `id` and `useMirrorTooltip(id)` opens and closes that tooltip from anywhere in the app, which is how a tour or a validation hint shows one without a pointer anywhere near it. ```vue ``` ## API reference **Module.** A bundled `options` object on the root, and `useMirrorTooltip(id)` as the programmatic API. Every part takes `id` to resolve a tooltip it is not nested inside. ### `Tooltip.Group` Renders its children and nothing else. Optional, and only worth adding where more than one tooltip sits together. It carries no delays: those belong to each `Tooltip.Root`. #### Options ::docs-table --- columns: - label: Option - label: Type - label: Default rows: - items: - label: timeout description: 'Milliseconds the group stays [warm](#sharing-the-timings-across-a-group) after its last tooltip closed.' - label: number - label: '400' --- :: ### `Tooltip.Root` Renders its children. Owns the open state and the timings. #### Props ::docs-table --- columns: - label: Prop - label: Type - label: Default rows: - items: - label: id description: '[The instance ID](#reaching-the-tooltip-from-anywhere).' - label: string - label: generated plaintext: true - items: - label: open description: Open state. `v-model:open`. - label: 'boolean | undefined' - label: undefined - items: - label: defaultOpen description: 'Initial open state when [uncontrolled](/components/composition#controlled-and-uncontrolled).' - label: boolean - label: 'false' - items: - label: options description: Everything else. Deep-merged over the defaults. - label: TooltipOptions - label: see below plaintext: true --- :: #### Options ::docs-table --- columns: - label: Option - label: Type - label: Default rows: - items: - label: delay description: 'Milliseconds the pointer rests on the trigger before it opens. [Shared with a const](#sharing-the-timings-across-a-group).' - label: number - label: '600' - items: - label: closeDelay description: 'Milliseconds the tooltip waits after the pointer leaves. [Shared with a const](#sharing-the-timings-across-a-group).' - label: number - label: '0' - items: - label: disabled description: Refuses to open at all. - label: boolean - label: 'false' - items: - label: hoverable description: The popup takes the pointer, so moving onto it keeps the tooltip open. - label: boolean - label: 'true' - items: - label: trackCursorAxis description: 'Moves the popup with [the pointer](#following-the-cursor) along that axis.' - label: '''none'' | ''x'' | ''y'' | ''both''' - label: '''none''' - items: - label: dismiss.escape description: Escape closes the tooltip. - label: boolean - label: 'true' - items: - label: dismiss.pointerDownOutside description: A pointer down outside closes the tooltip. - label: boolean - label: 'true' - items: - label: dismiss.triggerPress description: A pointer down on the trigger closes the tooltip. - label: boolean - label: 'true' - items: - label: forceMount description: Keeps the popup and the backdrop mounted while closed. - label: boolean - label: 'false' - items: - label: backdrop description: 'Renders a fixed `

` behind the popup.' - label: boolean - label: 'false' - items: - label: portal.to description: The teleport target for the content. - label: 'string | HTMLElement' - label: body plaintext: true - items: - label: portal.disabled description: Renders the content in place instead. - label: boolean - label: 'false' - items: - label: portal.defer description: 'Resolves the target after mount, for a target rendered by the same app.' - label: boolean - label: 'false' - items: - label: floating.side description: Preferred side. Reactive. - label: '''top'' | ''right'' | ''bottom'' | ''left''' - label: '''top''' - items: - label: floating.sideOffset description: Gap from the trigger, in pixels. - label: number - label: '4' - items: - label: floating.align description: Alignment along that side. Reactive. - label: '''start'' | ''center'' | ''end''' - label: '''center''' - items: - label: floating.alignOffset description: Shift along the alignment axis, in pixels. - label: number - label: '0' - items: - label: floating.strategy description: Positioning strategy. - label: '''absolute'' | ''fixed''' - label: '''absolute''' - items: - label: floating.flip description: Flip to the opposite side when there is no room. - label: boolean - label: 'true' - items: - label: floating.shift description: Slide along the side to stay in view. - label: boolean - label: 'true' - items: - label: floating.collisionPadding description: Padding used by flipping and shifting. - label: number - label: '8' - items: - label: transition.popup description: Vue transition name for the popup. - label: string - label: '''mirror-tooltip-popup''' - items: - label: transition.backdrop description: Vue transition name for the backdrop. - label: string - label: '''mirror-tooltip-backdrop''' --- :: #### Emits ::docs-table --- columns: - label: Emit - label: Payload rows: - items: - label: update:open description: The tooltip opens or closes. - label: boolean - items: - label: openChange description: The tooltip opens or closes, with what caused it. - label: '(open: boolean, reason: TooltipOpenReason)' --- :: `TooltipOpenReason` is `trigger-hover`, `trigger-focus`, `trigger-press`, `outside-press`, `escape-key` or `imperative`. #### Slot props ::docs-table --- columns: - label: Prop - label: Type rows: - items: - label: open description: The tooltip is open. - label: boolean --- :: ### `Tooltip.Trigger` Renders a `