Tooltip

const PreviewEn = () => {
  return (
    <Tooltip content='Copy' placement='top'>
      <Button icon aria-label='Copy'>
        <FilesIcon aria-hidden />
      </Button>
    </Tooltip>
  );
};

render(<PreviewEn />)

Use Tooltip when

• a symbol needs a brief explanation
• the action of an interactive element needs to be clarified
• keyboard shortcuts need to be shown

Avoid using Tooltip when

• the text is already visible on the page
• the explanation is longer than four words, use Popover instead
• the content contains links or other interactive elements, use Popover instead

Example

With text

const WithStringEn = () => {
  return <Tooltip content='Organisation number'>Org. no.</Tooltip>;
};

render(<WithStringEn />)

Placement

Consider whether the Tooltip should be placed above, below, or beside the element.

const PlacementEn = () => {
  return (
    <Tooltip content='Copy' placement='bottom'>
      <Button icon aria-label='Copy'>
        <FilesIcon aria-hidden />
      </Button>
    </Tooltip>
  );
};

render(<PlacementEn />)

Guidelines

Tooltip provides brief supplementary information without distracting from the main content. It is not intended for information that is essential for completing a task. Important content should instead appear as body text or help text on the page.

If richer content is needed - for example longer text, images, or buttons - use a Popover instead.

Tooltip should never be used as a replacement for alt text or title.

Text

A Tooltip should not contain more than one sentence or more than four words, to avoid obstructing other important elements on the screen.

Tooltip should not repeat text that is already present on the page. It should provide additional help or clarification that is not immediately obvious.