Tooltip

Unable to parse html

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

render(<Preview />)

Bruk

Eksempel

Med tekst

Unable to parse html

const WithString = () => {
  return <Tooltip content='Organisasjonsnummer'>Org.nr.</Tooltip>;
};

render(<WithString />)

Plassering

Bruk placement-prop'en for å justere plasseringen av Tooltip.

Unable to parse html

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

render(<Placement />)

HTML

Bruk pakken @digdir/designsystemet-web for å implementere Tooltip. Du trenger kun å legge på data-tooltip-attributtet på elementet som skal trigge tooltipen. For tilgjengelighet vil elementet automatisk få aria-label eller aria-description, avhengig av om det inneholder tekstinnhold.

Egendefinert element

Bruk funksjonen setTooltipElement for å sette et egendefinert tooltip-element. Elementet vil automatisk bli lagt til i document.body hvis det ikke allerede er i dokumentet.

CSS variablar og data-attributter