◇

Tooltip

7 parts

Anatomy

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

vue

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

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

API Reference

TooltipProvider

Provider

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

TooltipRoot

Root

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

TooltipTrigger

Trigger

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

TooltipPortal

Portal

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

TooltipContent

Content

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

TooltipArrow

Arrow

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

TooltipContentImpl

ContentImpl

Prop	Type	Default	Description
`ariaLabel`?	`string`	—	Accessible label for screen readers when the visible content is not descriptive enough (e.g. icon-only). Falls back to the rendered `textContent`.