Tooltip

Wrap a trigger element with Tooltip to show a short text label on hover or keyboard focus. Tooltips use aria-describedby to associate the message with the trigger.

Your profile

Saved bookmarks

Help center

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>
  );
}

Expand code Collapse code

Placement

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

Placed top

Placed right

Placed bottom

Placed left

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

const placements: TooltipPlacement[] = ['top', 'right', 'bottom', 'left'];

export function TooltipPlacementExample() {
  return (
    <div
      className="flex gap-24 items-center justify-center"
      style={{ height: 120 }}
    >
      {placements.map((placement) => (
        <Tooltip
          key={placement}
          message={`Placed ${placement}`}
          placement={placement}
        >
          <IconButton
            icon="question-mark"
            aria-label={`Tooltip ${placement}`}
          />
        </Tooltip>
      ))}
    </div>
  );
}

Expand code Collapse code

Arrow

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

With arrow

Tooltip without arrow

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

export function TooltipWithoutArrow() {
  return (
    <div
      className="flex gap-16 items-center justify-center"
      style={{ height: 120 }}
    >
      <Tooltip message="With arrow" withArrow>
        <IconButton icon="question-mark" aria-label="With arrow" />
      </Tooltip>
      <Tooltip message="Tooltip without arrow" withArrow={false}>
        <IconButton icon="question-mark" aria-label="Without arrow" />
      </Tooltip>
    </div>
  );
}

Expand code Collapse code

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).

Props

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