Tooltip

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

render(<Preview />)

Bruk

Eksempel

Med tekst

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

render(<WithString />)

Plassering

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

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

render(<Placement />)

HTML

Tooltip bruker en manuell popover (mozilla.org). Du må selv koble på at hover åpner, fokusering åpner og at den lukkes igjen ved tap av fokus, hover eller Esc.

I React bruker vi floating-ui (floating-ui.com) for plassering, og dette er et bibliotek som også kan brukes i rene JavaScript-applikasjoner.

For å style popoveren som en Tooltip, brukes klassen ds-tooltip.

data-placement er brukt for å plassere pila riktig. Dette attributtet henger sammen med en "plugin" vi har laget for floating-ui. Den er portabel til andre som bruker floating-ui, og du finner koden på github.com.

CSS variablar og data-attributter

Ingen relevante data-attributter funnet.