Tooltip

Usage

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from '@acronis-platform/ui-react';

Tooltip, TooltipTrigger, and TooltipContent wrap Base UI's Tooltip primitive — hover/focus open behavior, positioning, portalling, and ARIA come from Base UI. TooltipTrigger is polymorphic via the render prop, so it can wrap any element (such as a Button). Wrap your app (or a subtree) in TooltipProvider to share open/close timing across tooltips — it applies a 300ms open delay by default, overridable with delay.

Examples

A basic tooltip on a button:

<Tooltip>
  <TooltipTrigger render={<Button variant="secondary">Hover me</Button>} />
  <TooltipContent>Helpful hint</TooltipContent>
</Tooltip>

Position the content with side (and optionally align):

<Tooltip>
  <TooltipTrigger render={<Button variant="secondary">Top</Button>} />
  <TooltipContent side="top">On top</TooltipContent>
</Tooltip>

Use anchor when the popup should be positioned against something other than the trigger — for example a truncating label inside a full-width row, where the tooltip should align to the row's edge rather than the label's:

const rowRef = React.useRef<HTMLDivElement>(null);

<div ref={rowRef} className="flex w-full">
  <Tooltip>
    <TooltipTrigger
      render={<span className="truncate">A very long label</span>}
    />
    <TooltipContent anchor={rowRef}>A very long label</TooltipContent>
  </Tooltip>
</div>;

Share timing across many tooltips with a provider:

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<ButtonIcon aria-label="Edit"><PencilIcon /></ButtonIcon>} />
    <TooltipContent>Edit</TooltipContent>
  </Tooltip>
  {/* …more tooltips… */}
</TooltipProvider>

Portaling

TooltipContent renders the popup in a portal. When the tooltip lives inside an isolated container (e.g. a shadow root), wrap the app in PortalContainerProvider so the popup mounts inside that scope and inherits its styles — see Shadow DOM Integration. An explicit portalContainer on TooltipContent overrides the context for a single tooltip.

Sizing

TooltipContent's popup sizes to its content by default, bounded by the --ui-tooltip-container-width-min (48px) and --ui-tooltip-container-width-max (256px) tokens — long text wraps once it hits the 256px cap. Pass a width utility via className (e.g. className="w-64") to override the default sizing; it still respects the token-driven max-w/min-w bounds.

API Reference

These parts re-export Base UI's Tooltip primitives and do not define their own named prop interfaces. TooltipContent additionally accepts side (default 'top'), align (default 'center'), sideOffset (default 6), anchor, portalContainer, and keepMounted to control positioning and portalling. Refer to the Base UI Tooltip docs for the full prop surface of each part.