Tooltip

The Tooltip component is a Base UI component.

<Tooltip>
  <TooltipTrigger render={<Button label="Hover me" />} />
  <TooltipPopup>This action cannot be undone</TooltipPopup>
</Tooltip>

Side

The Tooltip comes with 4 sides: top (default), bottom, left, right.

<Tooltip>
  <TooltipTrigger render={<IconButton icon={<IconArrowUpOutline18 />} />} />
  <TooltipPopup side="top">Top side</TooltipPopup>
</Tooltip>
<Tooltip>
  <TooltipTrigger render={<IconButton icon={<IconArrowDownOutline18 />} />} />
  <TooltipPopup side="bottom">Bottom side</TooltipPopup>
</Tooltip>
<Tooltip>
  <TooltipTrigger render={<IconButton icon={<IconArrowLeftOutline18 />} />} />
  <TooltipPopup side="left">Left side</TooltipPopup>
</Tooltip>
<Tooltip>
  <TooltipTrigger render={<IconButton icon={<IconArrowRightOutline18 />} />} />
  <TooltipPopup side="right">Right side</TooltipPopup>
</Tooltip>