Overlays

Tooltip

A short label shown on hover or focus. Only ever supplementary: it is invisible on touch and gone the moment focus moves.

Basic

Hover, or tab to them. Mount Tooltip.Provider once near the app root so a row of icon buttons shares one open delay.

<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger asChild>
      <Button variant="ghost" iconOnly aria-label="Copy">
        <Icon name="content_copy" />
      </Button>
    </Tooltip.Trigger>
    <Tooltip.Content>
      Copy install command
      <Tooltip.Arrow />
    </Tooltip.Content>
  </Tooltip.Root>
</Tooltip.Provider>

A tooltip is not a label. The buttons above carry aria-label as well, because a screen reader user on a touch device will never see the tooltip. Anything a user must read to proceed belongs in the interface itself.

Parts

Import it as a namespace, and the parts work on either side of the server boundary.

import * as Tooltip from '@minuk-hwang-design-system/components-react/tooltip';

Part	What it is
`Tooltip.Provider`	Shares delays. Mount once near the root.
`Tooltip.Root`	One tooltip.
`Tooltip.Trigger`	What is hovered or focused.
`Tooltip.Content`	The label.
`Tooltip.Arrow`	Optional pointer.

Props

Prop	Type	Default	Notes
`delayDuration`	`number`	700	On Provider or Root. How long before the first one opens.
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	'top'	On Content. Preferred side. It flips to the opposite one rather than run off the viewport.
`sideOffset`	`number`	6	On Content. Gap between the tooltip and its trigger, in pixels.
`collisionPadding`	`number`	8	On Content. How close to the viewport edge it may sit before shifting.