Tooltip

Edit on GitHub

Tooltips display brief descriptive text when users hover over or focus an element, explaining its purpose without cluttering the interface.

@volvo-cars/css v2.5.1@volvo-cars/react-tooltip v0.2.3

Tooltip associates its message with a focusable trigger through aria-describedby.

Show codeHide code

import { IconButton } from '@volvo-cars/react-icons';
import { Tooltip } from '@volvo-cars/react-tooltip';

export function BasicTooltip() {
  return (
    <div
      className="flex gap-16 items-center justify-center"
      style={{ height: 120 }}
    >
      <Tooltip message="Your profile">
        <IconButton icon="profile" aria-label="Go to your profile" />
      </Tooltip>
      <Tooltip message="Saved bookmarks">
        <IconButton icon="bookmark" aria-label="Saved bookmarks" />
      </Tooltip>
      <Tooltip message="Help center">
        <IconButton icon="question-mark" aria-label="Help center" />
      </Tooltip>
    </div>
  );
}

Placement

Control which side the tooltip appears on with placement. Defaults to 'bottom'. If the chosen position causes overflow, the tooltip automatically flips.

Arrow

By default tooltips include a directional arrow. Set withArrow={false} to hide it.

The spacing between the end of the pointer and the UI element is 4px.

Delay

The delay prop controls how long (in ms) a user must hover before the tooltip appears. Defaults to 500. On keyboard focus, or when another tooltip was recently open, the tooltip shows instantly.

<Tooltip message="Quick" delay={200}>
  <button type="button">Hover me</button>
</Tooltip>

Accessibility

Key consumer responsibilities from the WCAG audit:

Trigger association: the React component sets aria-describedby automatically. For CSS-only usage, add it manually.
Keyboard access: tooltips appear on focus and dismiss on blur. Ensure trigger elements are focusable (tabIndex={0} is added by the React component).
No essential content: tooltips are supplementary. Don’t put critical information only in a tooltip. It may not be accessible to all users.
Contrast: tooltip text and container meet WCAG contrast minimums (handled by the tooltip CSS class).

Max width

Tooltips have a maximum width of 24 characters. Text that exceeds this width wraps onto a second line.

Overflow

When the label is too long for the available horizontal space, it wraps to form another line.

Show codeHide code

import { IconButton } from '@volvo-cars/react-icons';
import { Tooltip } from '@volvo-cars/react-tooltip';

export function TooltipOverflow() {
  return (
    <div className="flex items-center justify-center" style={{ height: 120 }}>
      <Tooltip message="This is a tooltip label that wraps into 2 lines of text.">
        <IconButton icon="bookmark" aria-label="Saved bookmarks" />
      </Tooltip>
    </div>
  );
}

Behaviour

Tooltips appear when the user hovers over a clickable element or when the element receives keyboard focus. They disappear when the cursor moves outside of the clickable area or the element loses focus.

Props

Prop	Type	Required	Default
`placement`	TooltipPlacement	-	bottom
`message`	string	✓	-
`style`	CSSProperties	-	-
`delay`	number	-	500
`className`	string	-	-
`withArrow`	boolean	-	true

Breaking changes

🔴 inverted prop has been removed, and the Tooltip will now render with a data-color-mode aware theme that renders the component dark on light mode (the opposite of current behaviour)
🟢 A positional arrow has been added by default. While the arrow is recommended, it can be disabled where necessary by setting withArrow={false}