Tooltip

Props

Usage

<Tooltip content="copy to clipboard" position="down">
  <Button aria-label="copy">
    <Button.Icon icon={<MdContentCopy />} />
  </Button>
</Tooltip>

Content is the switch

There is no open prop. A tooltip with a content reveals itself on hover and on focus-within; one whose content is null or undefined never does. So a conditional message needs no conditional rendering — pass the value and the tooltip follows it.

<Tooltip content={error}>
  <Field value={value} />
</Tooltip>

The last non-empty content is kept while the bubble fades out, so a tooltip that empties does not go blank mid-transition. That is the reason the component holds a ref at all.

Position

Four fixed positions, placed with absolute offsets from the anchor. There is no flipping or collision detection: it is CSS with no measuring, so it costs nothing, and near a viewport edge choosing the right side is your call rather than the component's.

The anchor is inline-block and sized to its content, so it wraps a control without changing the layout around it.

What it is announced as

The bubble is a role="tooltip", which on its own is not read out: a tooltip is discovered through the element it describes. Give it an id and reference it with aria-describedby when the text adds information the control does not already carry.

<Tooltip id="save-hint" content="saves without closing">
  <Button aria-describedby="save-hint">
    <Button.Label label="save" />
  </Button>
</Tooltip>

Do not use it as the only name of a control: a Button with just an icon needs its own aria-label, and the tooltip repeats that name for sighted users rather than replacing it. Note also that a tooltip appears on hover and on keyboard focus, but not on touch, so it can never be the only place where something is explained.