Tooltip

En Tooltip er en liten informasjonsboks som vises når brukeren holder musepekeren over, fokuserer på eller berører et element. Den brukes til å gi ekstra kontekst, forklaringer eller detaljer uten å forstyrre hovedinnholdet.

Kun tekst

Tooltip-panelet viser kun ren tekst. Bruk Popover for innhold som krever formatering, lenker eller interaktive elementer.

Egnet til

• Kort, supplerende informasjon knyttet til et element
• Forklaring av ikoner, begreper eller forkortelser
• Kontekst til handlinger før brukeren utfører dem
• Når informasjonen ikke er kritisk for å fullføre oppgaven

Uegnet til

• Viktig informasjon som brukeren må forstå for å fullføre en oppgave
• Lengre forklaringer eller komplekse instruksjoner — bruk popover i stedet
• Innhold som må være tilgjengelig på mobil uten hover
• Som erstatning for tydelige etiketter

Bruk på skjemafelt

Tooltip integreres i skjemafelt via tooltip-prop (React) eller tooltip-attributt (HTML) på feltkomponentene. <ix-field> injiserer automatisk en info-ikon-knapp i label-raden.

Result

Loading...

Kode

Live Editor

<ix-field tooltip="Fullt juridisk navn som det står i passet" tooltip-label="Mer informasjon om Navn">
  <label>Navn</label>
  <div class="ix-text-field">
    <input type="text" />
  </div>
  <span data-field="error"></span>
</ix-field>

Result

Loading...

Kode

Live Editor

<TextField
  label="Navn"
  tooltip="Fullt juridisk navn som det står i passet"
  tooltipLabel="Mer informasjon om Navn"
/>

Med TextArea

Result

Loading...

Kode

Live Editor

<ix-field tooltip="Maks 500 tegn, ingen HTML" tooltip-label="Mer informasjon om Beskrivelse">
  <label>Beskrivelse</label>
  <div class="ix-text-area">
    <textarea></textarea>
  </div>
  <span data-field="error"></span>
</ix-field>

Result

Loading...

Kode

Live Editor

<TextArea
  label="Beskrivelse"
  tooltip="Maks 500 tegn, ingen HTML"
  tooltipLabel="Mer informasjon om Beskrivelse"
/>

Retningslinjer

Innhold

Hold teksten kort og presis — ideelt 1–4 ord eller én kort setning. Tooltip er ikke egnet til lengre forklaringer.

• Skriv i et klart og enkelt språk
• Unngå fagbegreper hvis mulig
• Start med det viktigste først
• Ikke bruk punktlister
• Kun ren tekst — ingen HTML, lenker eller formatering

Posisjonering

Tooltip plasseres automatisk over trigger-elementet (top som standard) og flipper til motsatt side om det ikke er plass. Plassering kan overstyres via tooltipPlacement (React) eller tooltip-placement (HTML):

Verdi	Beskrivelse
top	Over trigger, sentrert (standard)
top-start	Over trigger, justert mot venstre
top-end	Over trigger, justert mot høyre
bottom	Under trigger, sentrert
bottom-start	Under trigger, justert mot venstre
bottom-end	Under trigger, justert mot høyre
left	Til venstre for trigger
right	Til høyre for trigger

Pilen peker alltid mot senteret av trigger-elementet, også etter at panelet er clamped til viewport.

Result

Loading...

Kode

Live Editor

<div style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '2rem', padding: '3rem'}}>
  <ix-field tooltip="Tekst over feltet" tooltip-placement="top" tooltip-label="Mer informasjon">
    <label>Top (standard)</label>
    <div class="ix-text-field"><input type="text" /></div>
    <span data-field="error"></span>
  </ix-field>
  <ix-field tooltip="Justert mot venstre" tooltip-placement="top-start" tooltip-label="Mer informasjon">
    <label>Top-start</label>
    <div class="ix-text-field"><input type="text" /></div>
    <span data-field="error"></span>
  </ix-field>
  <ix-field tooltip="Justert mot høyre" tooltip-placement="top-end" tooltip-label="Mer informasjon">
    <label>Top-end</label>
    <div class="ix-text-field"><input type="text" /></div>
    <span data-field="error"></span>
  </ix-field>
  <ix-field tooltip="Tekst under feltet" tooltip-placement="bottom" tooltip-label="Mer informasjon">
    <label>Bottom</label>
    <div class="ix-text-field"><input type="text" /></div>
    <span data-field="error"></span>
  </ix-field>
  <ix-field tooltip="Justert mot venstre" tooltip-placement="bottom-start" tooltip-label="Mer informasjon">
    <label>Bottom-start</label>
    <div class="ix-text-field"><input type="text" /></div>
    <span data-field="error"></span>
  </ix-field>
  <ix-field tooltip="Justert mot høyre" tooltip-placement="bottom-end" tooltip-label="Mer informasjon">
    <label>Bottom-end</label>
    <div class="ix-text-field"><input type="text" /></div>
    <span data-field="error"></span>
  </ix-field>
  <ix-field tooltip="Tekst til venstre" tooltip-placement="left" tooltip-label="Mer informasjon">
    <label>Left</label>
    <div class="ix-text-field"><input type="text" /></div>
    <span data-field="error"></span>
  </ix-field>
  <ix-field tooltip="Tekst til høyre" tooltip-placement="right" tooltip-label="Mer informasjon">
    <label>Right</label>
    <div class="ix-text-field"><input type="text" /></div>
    <span data-field="error"></span>
  </ix-field>
</div>

Result

Loading...

Kode

Live Editor

<div style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '2rem', padding: '3rem'}}>
  <TextField label="Top (standard)" tooltip="Tekst over feltet" tooltipPlacement="top" tooltipLabel="Mer informasjon" />
  <TextField label="Top-start" tooltip="Justert mot venstre" tooltipPlacement="top-start" tooltipLabel="Mer informasjon" />
  <TextField label="Top-end" tooltip="Justert mot høyre" tooltipPlacement="top-end" tooltipLabel="Mer informasjon" />
  <TextField label="Bottom" tooltip="Tekst under feltet" tooltipPlacement="bottom" tooltipLabel="Mer informasjon" />
  <TextField label="Bottom-start" tooltip="Justert mot venstre" tooltipPlacement="bottom-start" tooltipLabel="Mer informasjon" />
  <TextField label="Bottom-end" tooltip="Justert mot høyre" tooltipPlacement="bottom-end" tooltipLabel="Mer informasjon" />
  <TextField label="Left" tooltip="Tekst til venstre" tooltipPlacement="left" tooltipLabel="Mer informasjon" />
  <TextField label="Right" tooltip="Tekst til høyre" tooltipPlacement="right" tooltipLabel="Mer informasjon" />
</div>

Interaksjon

• Vises ved hover (300 ms delay), focus og touch
• Lukkes når musepekeren forlater trigger, fokus flyttes, eller brukeren trykker Escape
• Trenger ikke aktiv lukking — forsvinner automatisk
• Kun én tooltip er synlig om gangen

API

<ix-field>-attributter

Attributt	Type	Beskrivelse
tooltip	string	Innholdet som vises i tooltip. Kun tekst — ingen HTML. Trigger injeksjon av info-knapp i label-raden.
tooltip-label	string	aria-label på info-knappen. Alltid påkrevd for riktig tilgjengelighet — se advarsel over.
tooltip-placement	se tabell over	Ønsket plassering. Flipper automatisk om det ikke er plass. Standard: "top".
data-tooltip	string	Brukes direkte på et hvilket som helst element for å gi det tooltip-oppførsel. Kun tekst.
data-tooltip-placement	se tabell over	Ønsket plassering på vilkårlige data-tooltip-elementer. Standard: "top".

Props på TextField og TextArea

Prop	Type	Standard	Beskrivelse
tooltip	string		Innholdet som vises i tooltip. Kun tekst — ingen HTML. Trigger injeksjon av info-knapp i label-raden.
tooltipLabel	string		aria-label på info-knappen. Alltid påkrevd for riktig tilgjengelighet — se advarsel over.
tooltipPlacement	se tabell over	"top"	Ønsket plassering. Flipper automatisk om det ikke er plass.

Universell utforming

Hva du selv må sørge for

• Send alltid inn tooltipLabel — info-knappen har ingen hardkodet aria-label. Uten tooltipLabel (React) / tooltip-label (HTML) vil knappen stå uten tilgjengelig navn. En konsolladvarsel vises under utvikling. Eksempler: "Mer informasjon" (bokmål), "Meir informasjon" (nynorsk), "More information" (engelsk).
• Tooltip er ikke eneste kilde til kritisk informasjon — informasjon brukeren må ha for å fullføre en oppgave skal ligge i label eller description.
• Kun tekst i tooltip — ikke legg inn HTML, lenker eller formatering i tooltip-verdien.

Hva komponenten gjør automatisk

• role="tooltip" settes på panelet — skjermlesere behandler det korrekt som supplerende beskrivelse
• aria-describedby kobles dynamisk fra info-knappen til tooltip-panelet når tooltip åpnes, og fjernes ved lukking
• aria-label settes på info-knappen med verdien fra tooltipLabel / tooltip-label
• Escape lukker tooltip uten å flytte fokus (WCAG 2.1.2)
• Focus aktiverer tooltip — tastaturbrukere har full tilgang
• 44×44 px touch-mål via ::before på info-knappen (WCAG 2.5.8)
• Focus-visible-ring på info-knappen (WCAG 2.4.7)
• Inverted farger med tilstrekkelig kontrast mellom tekst og bakgrunn (WCAG 1.4.3)

Tastaturnavigasjon

Tast	Handling
Tab	Flytter fokus til info-knappen
Shift+Tab	Flytter fokus til forrige fokuserbare element
Escape	Lukker tooltip uten å flytte fokus

Skjermleser

• Ved fokus på info-knappen: "[tooltipLabel], knapp" — f.eks. "Mer informasjon, knapp"
• Tooltip-innhold leses som tilleggsbeskrivelse: "[label], tekstfelt, [tooltip-innhold]" når aria-describedby er satt
• Tooltip-innholdet annonseres ikke ved åpning — det er tilgjengelig via aria-describedby og leses ved fokus på trigger

WCAG-kriterier

Sist gjennomgått: 2026-05-15 — alle 56 WCAG 2.2-kriterier vurdert

WCAG-kriterier4 ditt ansvar · 17 håndtert · 37 ikke relevant · 0 ikke på plass

Ditt ansvar (4)

Kriterium	Nivå	Hva du må gjøre
4.1.2 Navn, rolle, verdi	A	Send alltid inn tooltipLabel på riktig språk. Info-knappen har ingen hardkodet aria-label — konsumenten er ansvarlig for å sende inn riktig tekst. Bruk tooltipLabel (React) / tooltip-label (HTML) med verdien for appens språk: "Mer informasjon" (bokmål), "Meir informasjon" (nynorsk) eller "More information" (engelsk). Mangler tooltip-label vil knappen stå uten tilgjengelig navn og bryte WCAG 4.1.2.
3.1.2 Språk på deler av innhold	AA	Send alltid inn tooltipLabel på riktig språk. Info-knappen har ingen hardkodet aria-label — konsumenten er ansvarlig for å sende inn riktig tekst. Bruk tooltipLabel (React) / tooltip-label (HTML) med verdien for appens språk: "Mer informasjon" (bokmål), "Meir informasjon" (nynorsk) eller "More information" (engelsk). Mangler tooltip-label vil knappen stå uten tilgjengelig navn og bryte WCAG 4.1.2.
1.4.13 Innhold ved hover eller fokus	AA	Ikke bruk tooltip som eneste kilde til kritisk informasjon. Tooltip er supplementær informasjon — ikke kritisk. Informasjon brukeren må ha for å fullføre en oppgave skal ligge synlig i label, description eller annen permanent tekst. Tooltip er uegnet på mobil der hover ikke er tilgjengelig, og er unntatt fra ellers strenge krav til alternativ (WCAG 1.4.13 tillater at hover-innhold kan lukkes uten krav om persistens utover interaksjonen).
3.1.5 3.1.5	?	Hold tooltip-innholdet kort. Tooltip er designet for 1–4 ord eller én kort setning. Lengre forklaringer, punktlister eller lenker hører ikke hjemme i en tooltip. Bruk popover for lengre innhold.

Håndtert av komponenten (17)

Kriterium	Nivå	Hva komponenten gjør
1.3.1 Informasjon og relasjoner	A	role="tooltip" på panelet gir skjermleseren korrekt semantikk. aria-describedby kobles dynamisk fra trigger til panel ved åpning.
1.3.2 Meningsfull rekkefølge	A	Trigger-knappen og panelet følger naturlig DOM-rekkefølge.
1.3.3 Sensoriske egenskaper	A	Informasjon formidles via tekst, ikke farge alene.
1.4.1 Bruk av farge	A	Tooltip bruker ikke farge som eneste bærende informasjon.
1.4.3 Kontrast (minimum)	AA	Tooltip-panelet bruker inverterte design tokens (mørk bakgrunn, lys tekst) med tilstrekkelig kontrast.
1.4.4 Endre tekststørrelse	AA	Relative enheter — skalerer korrekt ved 200 % zoom.
1.4.10 Omflyt	AA	Tooltip-panelet er position: fixed og tilpasser seg viewport ved posisjonering.
1.4.11 Kontrast for ikke-tekstlig innhold	AA	Fokusindikator på info-knappen oppfyller 3:1 kontrastkrav.
1.4.12 Tekstavstand	AA	Tåler økt line-height og bokstavavstand uten tap av innhold.
1.4.13 Innhold ved hover eller fokus	AA	Tooltip forblir synlig ved hover over panelet (safe-area via pointer-events). Lukkes med Escape. Forsvinner ikke ved hover over trigger-elementet.
2.1.1 Tastatur	A	Tooltip aktiveres ved focus — tastaturbrukere får tilgang uten mus.
2.1.2 Ingen tastaturfelle	A	Tooltip lukkes med Escape uten å flytte fokus.
2.4.3 Fokusrekkefølge	A	Info-knappen er en <button> som følger naturlig tab-rekkefølge.
2.4.7 Synlig fokus	AA	Tydelig focus-visible-ring på info-knappen.
2.5.8 Målstørrelse (minimum)	AA	Info-knappen har min-width/height 44px — oppfyller touch-målkrav.
3.2.1 Ved fokus	A	Fokus på trigger åpner tooltip, men trigger ingen navigasjon eller kontekstendring.
4.1.2 Navn, rolle, verdi	A	Info-knappen er en native <button> med aria-label. role="tooltip" på panel. aria-describedby kobler trigger til panel.

Ikke relevant (37)

Kriterium	Nivå	Hvorfor ikke relevant
1.2.1 Bare lyd og bare video (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.2 Teksting (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.4 Teksting (direkte)	AA	Ingen medieelementer.
1.2.5 Synstolking (forhåndsinnspilt)	AA	Ingen medieelementer.
1.3.4 Visningsretning	AA	Ingen fast orientering — tilpasser seg visningsretning.
1.3.5 Identifiser formål med inndata	AA	Ingen input-felter i tooltip.
1.4.2 Styring av lyd	A	Ingen lydelementer.
1.4.5 Bilder av tekst	AA	Ingen bilder av tekst.
2.1.4 Tastatursnarveier	A	Ingen egendefinerte tastatursnarveier.
2.2.1 Justerbar hastighet	A	Ingen tidsbegrensede funksjoner.
2.2.2 Pause, stopp, skjul	A	Ingen animasjon eller automatisk oppdatering.
2.3.1 Terskelverdi på tre glimt	A	Ingen blinkende eller glimtende innhold.
2.4.1 Hoppe over blokker	A	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.2 Sidetitler	A	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.4 Formål med lenke (i kontekst)	A	Ingen lenker i komponenten.
2.4.5 Flere måter	AA	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.6 Overskrifter og ledetekster	AA	Tooltip er ikke en overskrift eller label.
2.4.11 Fokus ikke skjult (minimum)	AA	Ingen sticky/overlappende elementer som kan skjule fokus.
2.5.1 Pekerbevegelser	A	Ingen drag-and-drop eller sveipebevegelser.
2.5.2 Avbryt peker	A	Native <button> — nettleseren håndterer pekerinteraksjon.
2.5.4 Bevegelsesaktivering	A	Ingen bevegelsesbasert interaksjon.
2.5.6 Samtidige inndatamekanismer	A
2.5.7 Drabevegelser	A	Ingen drag-and-drop.
3.1.1 Språk på siden	A	Sidekrav — gjelder ikke enkeltkomponenter.
3.1.2 Språk på deler av innhold	AA	Komponenten setter ikke lang-attributt — innhold er på sidespråket.
3.2.2 Ved inndata	A	Tooltip aktiveres av hover/focus, ikke av skjemainnsending.
3.2.3 Konsistent navigasjon	AA	Sidekrav — gjelder ikke enkeltkomponenter.
3.2.4 Konsistent identifikasjon	AA	Systemkrav — gjelder konsistens på tvers av sider, ikke enkeltkomponenter.
3.2.6 Konsistent hjelp	A	Sidekrav — gjelder plassering av hjelpefunksjon på tvers av sider.
3.3.1 Identifikasjon av feil	A
3.3.2 Ledetekster eller instruksjoner	A
3.3.3 Forslag ved feil	AA
3.3.4 Forhindring av feil (juridisk, økonomisk, data)	AA	Flytkrav — gjelder bekreftelse/reversering av transaksjoner, ikke enkeltfelter.
3.3.7 Redundant oppføring	A	Flytkrav — gjelder at brukeren ikke skal gjenta informasjon i en prosess.
3.3.8 Tilgjengelig autentisering (minimum)	AA	Ikke en autentiseringskomponent.
4.1.3 Statusmeldinger	AA	Ingen statusmeldinger — tooltip-innhold er ikke en statusmelding.

Tilpasning med CSS

Tilgjengelige klasser og selektorer

Element	Selektor
Tooltip-panel	.ix-tooltip
Pil (pseudo-element)	.ix-tooltip::before
Plassering over trigger	.ix-tooltip[data-placement^="top"]
Plassering under trigger	.ix-tooltip[data-placement^="bottom"]
Plassering til venstre	.ix-tooltip[data-placement="left"]
Plassering til høyre	.ix-tooltip[data-placement="right"]
Label-rad (label + info-knapp)	.ix-field__label-row
Info-knapp	.ix-field__tooltip-btn

Tilpassede farger

.ix-tooltip {
  --ix-tooltip-background: var(--ix-color-foreground-main-default);
}

Relatert

• TextField — tekstfelt der tooltip er tilgjengelig via tooltip-prop
• TextArea — tekstområde der tooltip er tilgjengelig via tooltip-prop