Informasjonskapsler på aksel.nav.no

Uansett valg deler vi aldri dine data med andre. Mer om informasjonskapsler på aksel.nav.no

  • Godta alle: Hjelper oss gjøre tjenestene bedre for deg basert på anonymisert bruk.
  • Bare nødvendige: Sikrer at tjenesten fungerer og er trygg. Kan ikke velges bort.
Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

Tooltip

En tooltip er en liten boks med tekst som vises på fokus eller hover. Komponenten brukes til å beskrive et interaktivt element eller handlingen det utfører.

StabilOppdatert 9. mai 2025
Github FigmaEndringslogg

Egnet til:

  • Beskrive et interaktiv element
  • Beskrive handlingen et interaktivt element gjør

Uegnet til:

  • Forklare noe
  • Vise skjult innhold
  • Vise meldinger eller advarsler
  • Alt-tekst eller title

Eksempler

Sandbox
Åpne eksempel i nytt vindu
TSX
<Tooltip content="Skriv ut dokument">
  <Button icon={<PrinterLargeIcon aria-hidden />} />
</Tooltip>

Tips

Elementet du bruker tooltipen på bør være forståelig uten tooltipen. Tooltipens rolle er å øke forståelsen av et element, ikke være det som gjør et element forståelig.

Retningslinjer

Innhold

En tooltip kan ha to typer innhold:

  • Kort tekst
  • Tastatursnarveier

Mobil

Tooltip aktiveres av fokusmarkering eller hover. Dette gjør komponenten mindre egnet for touch-enheter.

Uegnet til rikt innhold

En tooltip er ikke designet eller kodet til å håndtere mye tekst og/eller rikt innhold som bilder, video, knapper osv. Det er derimot Popover perfekt til.

Lenker

Uegnet til skjult innhold

Av og til har du mer innhold enn det er plass til i grensesnittet. Det kan være fristende å vise dette innholdet raskt og enkelt med noe som spretter opp. Tooltip er ikke en god løsning for dette, blant annet fordi den ikke håndterer mye tekst. Det beste er å designe grensesnittet slik at innholdet er eller kan gjøres synlig for brukeren.

Gjør
Ekstra høy tabell-celle med mye tekst
Finn gode løsninger for å vise mye innhold som er tilpasset situasjonen.
Unngå
Tooltip brukt til å vise skjult innhold
Det er ikke brukervennlig eller lov til å vise skjult innhold med tooltip.

Uegnet til hjelpetekst og feilmeldinger i skjemaer

Hjelpetekster og feilmeldinger i skjemaer bør være synlige hele tiden og vises i nærheten av det bruker trenger hjelp til. Det er ikke brukervennlig å bruke tooltip til den type informasjon.

Gjør
Tekstfelt med feilmelding under
Her er feilmeldingen synlig ved siden av tingen som har feilen.
Unngå
Tekstfelt med feilmelding i en tooltip
Denne feilmeldingen dekker ikke UU-krav.

Tilgjengelighet

Interaksjon med touch

Når brukere interagerer med touch, får ikke elementer hover eller tastaturfokus. Tooltipen vises derfor bare når brukeren trykker på elementet. Den fjernes ved å trykke utenfor elementet og tooltipens areal.

Interaksjon med tastatur

Tooltip vises når et element får tastaturfokus og forsvinner når elementet mister fokus.

Interaksjon med skjermleser

Skjermlesere leser opp tooltipen når elementet får tastaturfokus.

Props

Tooltip

children

  • Type:
    ReactElement<any, string | JSXElementConstructor<any>> & RefAttributes<HTMLElement>
  • Description:

    Element tooltip anchors to.

    Needs to be React.ReactElement, does not support multiple children/react fragment

open?

  • Type:
    boolean
  • Description:

    Open state for contolled tooltip

defaultOpen?

  • Type:
    boolean
  • Default:
    false
  • Description:

    Tells tooltip to start in open state. Use sparingly since hover/focus on other elements will close it.

    open-prop overwrites this.

onOpenChange?

  • Type:
    ((open: boolean) => void)
  • Description:

    Change handler for open.

placement?

  • Type:
    "top" | "right" | "bottom" | "left"
  • Default:
    ""top""
  • Description:

    Orientation for tooltip.

arrow?

  • Type:
    boolean
  • Default:
    true
  • Description:

    Toggles rendering of arrow.

offset?

  • Type:
    number
  • Default:
    10px with arrow, 2px without arrow
  • Description:

    Distance from anchor to tooltip.

content

  • Type:
    string
  • Description:

    Text-content inside tooltip.

maxChar?

  • Type:
    number
  • Default:
    80
  • Description:

    Sets max character length.

    Ideally you should keep the length of the tooltip to a minimum (80 characters). Currently this prop only emits a warning in the console, which can be squelched by setting this to a larger number. However, before doing so you should try to shorten the content so that it fits into 80 characters.

delay?

  • Type:
    number
  • Default:
    150
  • Description:

    Adds a delay in milliseconds before opening tooltip.

keys?

  • Type:
    string[]
  • Description:

    List of Keyboard-keys for shortcuts.

describesChild?

  • Type:
    boolean
  • Default:
    false
  • Description:

    When false, Tooltip labels the element, and child-elements content will be ignored by screen-readers. When true, content is added as additional information to the child element.

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

Tokens

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.

TokenFallback
--ac-tooltip-bg--a-surface-inverted
--ac-tooltip-text--a-text-on-inverted
--ac-tooltip-key-bg--a-surface-neutral
--ac-tooltip-key-text--a-text-on-inverted