Tooltip

Wraps Radix Tooltip. Carbon-spec sizing + positioning + animation.

primitivesstablea11y: untested3/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LivebrandtoneOpen all variants in Storybook ↗

Edit JSX — preview updates livereact-live

import { Tooltip, TooltipContent, TooltipProvider, TooltipRoot } from "@avala/design";

<Tooltip>
  <TooltipContent />
  <TooltipProvider />
  <TooltipRoot />
</Tooltip>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-tooltip--defaultOpen in Storybook →

When to use

Surface a short text label on hover for an `IconButton`, `Avatar`, or any small target whose meaning isn't obvious.
Disambiguate truncated text in dense tables / lists.

When not to use

Click-triggered or persistent content → use `Popover`.
Action menus → use `DropdownMenu`.
Carbon's information-icon-toggled tooltip pattern → that's "Toggletip", not Tooltip; ship as a follow-up.
Anything longer than a sentence — Tooltip is a label, not a paragraph.