Tooltip

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

render(<PreviewEn />)

Usage

Examples

With text

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

render(<WithStringEn />)

Placement

Use the placement prop to adjust the placement of the Tooltip.

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

render(<PlacementEn />)

HTML

Tooltip uses a manual popover (mozilla.org). You must enable hover to open, focus to open, and close again on loss of focus, hover, or Esc.

In React we use floating-ui (floating-ui.com) for placement, and this is a library that can also be used in pure JavaScript applications.

To style the popover as a Tooltip, the ds-tooltip class is used.

data-placement is used to position the arrow correctly. This attribute is related to a plugin we have created for floating-ui. It is portable to others using floating-ui, and you can find the code on github.com.

CSS variables and data attributes

No relevant data attributes found.