◇

Tooltip

7 parts

A small floating label that appears on hover or keyboard focus to describe an otherwise non-obvious control (such as an icon-only button). Composed from a Trigger, a Portal, and Content (with an optional Arrow); positioning is handled by the underlying Popper. Tooltips are pointer/focus driven and non-interactive by design — reach for Popover when the overlay needs focusable content. Root owns the per-tooltip open state and provides context to every part. Each Root must live inside a TooltipProvider, which supplies shared delay/skip timing for a group of tooltips. Bind v-model:open to control it, or rely on the Trigger for uncontrolled use. Props here override the matching Provider defaults for this one tooltip.

Source

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  TooltipProvider,
  TooltipRoot,
  TooltipTrigger,
  TooltipPortal,
  TooltipContent,
  TooltipContentHoverable,
  TooltipArrow,
} from '@robonen/primitives/overlays/tooltip';

<TooltipRoot>
  <TooltipProvider />
  <TooltipTrigger />
  <TooltipPortal />
  <TooltipContent />
  <TooltipContentHoverable />
  <TooltipArrow />
</TooltipRoot>

API Reference

TooltipProvider

Provider

Wraps a group of tooltips to share open/close timing and global behavior. Place it high in the tree (often at the app root); every `TooltipRoot` must have a Provider ancestor. It governs the hover `delayDuration` and the `skipDelayDuration` window that lets neighboring tooltips open instantly once one has shown, plus group-wide defaults each `TooltipRoot` may override.

Prop	Type	Default	Description
`delayDuration`?	`number`	`700`	Hover delay before opening, in ms.
`skipDelayDuration`?	`number`	`300`	After a tooltip closes, subsequent tooltips open without delay for this many ms.
`disableHoverableContent`?	`boolean`	`false`	When `true`, the tooltip closes as soon as the pointer leaves the trigger (hoverable content disabled). Has a11y consequences.
`disableClosingTrigger`?	`boolean`	`false`	When `true`, clicking the trigger does not close the tooltip.
`disabled`?	`boolean`	`false`	Disable all tooltips inside this provider.
`ignoreNonKeyboardFocus`?	`boolean`	`false`	Skip opening on focus that did not come from the keyboard (matched via `:focus-visible`).
`content`?	`Partial<TooltipContentImplProps>`	—	Group-wide default Content props (e.g. `side`, `sideOffset`, `align`) applied to every tooltip in this provider. Props set on an individual `TooltipContent` always win over these defaults.

TooltipRoot

Root

A small floating label that appears on hover or keyboard focus to describe an otherwise non-obvious control (such as an icon-only button). Composed from a Trigger, a Portal, and Content (with an optional Arrow); positioning is handled by the underlying Popper. Tooltips are pointer/focus driven and non-interactive by design — reach for Popover when the overlay needs focusable content. Root owns the per-tooltip open state and provides context to every part. Each Root must live inside a `TooltipProvider`, which supplies shared delay/skip timing for a group of tooltips. Bind `v-model:open` to control it, or rely on the Trigger for uncontrolled use. Props here override the matching Provider defaults for this one tooltip.

Prop	Type	Default	Description
`defaultOpen`?	`boolean`	—	Initial open state in uncontrolled mode.
`delayDuration`?	`number`	`700`	Per-tooltip override for the provider's `delayDuration`.
`disableHoverableContent`?	`boolean`	—	Per-tooltip override for the provider's `disableHoverableContent`.
`disableClosingTrigger`?	`boolean`	—	Per-tooltip override for the provider's `disableClosingTrigger`.
`disabled`?	`boolean`	—	Per-tooltip override for the provider's `disabled`.
`ignoreNonKeyboardFocus`?	`boolean`	—	Per-tooltip override for the provider's `ignoreNonKeyboardFocus`.
`open`?	`boolean`	—	Two-way bound value (`v-model:open`).

Emits

Event	Payload
`update:open`	`[value: boolean]`

TooltipTrigger

Trigger

The element the tooltip describes and anchors to. Hovering or focusing it opens the tooltip (after the delay); pointer-down/click closes it unless `disableClosingTrigger` is set. Wires up `aria-describedby` to the content and renders as a `<button>` by default. Pass `reference` to position the tooltip against a custom virtual/real element instead of the trigger node.

No props or events — renders its element and forwards attributes.

TooltipPortal

Portal

Teleports the tooltip Content into another part of the DOM (the body by default) so it escapes parent `overflow`/`transform`/`z-index` stacking contexts. Wrap Content in a Portal when those clipping issues occur.

No props or events — renders its element and forwards attributes.

TooltipContent

Content

The floating panel that holds the tooltip's label, positioned relative to the Trigger. It mounts only while the tooltip is open (driven by `Presence`); set `forceMount` to keep it mounted for CSS exit animations. Side, alignment, and collision behavior are forwarded to the underlying Popper content.

Prop	Type	Default	Description
`forceMount`?	`boolean`	—	Keep mounted for CSS exit animations.

TooltipContentHoverable

ContentHoverable

No props or events — renders its element and forwards attributes.

TooltipArrow

Arrow

An optional pointer rendered inside Content that visually connects the tooltip to its Trigger. Place it as a child of `TooltipContent`; it tracks the resolved side and alignment automatically.

No props or events — renders its element and forwards attributes.