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.

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>

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>

API Reference

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