Skip to content
VolvoVolvo Cars Web Design System

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 Placement

Section titled “Tooltip Placement”
Show codeHide code
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>
  );
}

Tooltip Without Arrow

Section titled “Tooltip Without Arrow”
Show codeHide code
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>
  );
}