Tooltip

Unable to parse html

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

render(<PreviewEn />)

Usage

Examples

With text

Unable to parse html

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

render(<WithStringEn />)

Placement

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

Unable to parse html

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

render(<PlacementEn />)

HTML

Use the @digdir/designsystemet-web package to implement Tooltip. You only need to add the data-tooltip attribute to the element that will trigger the tooltip. For accessibility, the element will automatically receive either aria-label or aria-description, depending on whether it contains text content.

Custom element

Use the setTooltipElement function to set a custom tooltip element. The element will auto automatically be added do document.body if it is not already in the document.

CSS variables and data attributes