<lm-tooltip> – Verktøytips / Tooltip

Om komponenten

Kanonisk navn

<lm-tooltip>

Synonymer

hjelpetekst, forklaringsboble, hover-tekst, tooltip

Kategori

overlegg

ARIA-mønster

Tooltip

Parts

boble

Native-first-vurdering

Det native title-attributtet gir en tooltip, men uten kontroll over stil/timing og med dårlig, inkonsekvent tastatur-/skjermleserstøtte på tvers av nettlesere. Den nye interestfor-attributten (Interest Invokers) løser dette native når den støttes, og komponenten bruker den direkte når tilgjengelig ("interestForElement" in HTMLElement.prototype) - uten egne mouseenter/mouseleave/focus-lyttere. Uten støtte faller komponenten tilbake til tilsvarende, håndbygd hover-/fokus-/Escape-håndtering.

Nettleserstøtte

Bruker interestfor når nettleseren støtter det (nyeste Chrome/Safari), ellers en tastatur-/musefungerende fallback med Popover API der det finnes støtte.

Design-tokens

var(--color-surface-inverse, ...), var(--color-surface-inverse-text, ...), var(--space-2xs, ...), var(--space-small, ...), var(--radius-small, ...), var(--font-size-small, ...), var(--shadow-medium, ...), var(--z-overlay-top, ...)

Sist endret

20. september 2026

Brukt

Ikke i bruk andre steder ennå

Formål

Viser en kort forklaringstekst når brukeren holder musepekeren over eller fokuserer et element - typisk et ikon uten synlig tekst, eller en forkortelse som trenger utdyping. Implementerer ARIA APG sitt Tooltip-mønster (role="tooltip", aria-describedby, vises ved hover/fokus, skjules ved Escape/blur/mouseleave).

Egner seg for

• Korte, ikke-kritiske utdypinger av et element som allerede har en forståelig grunnfunksjon uten tooltipen (f.eks. et ikon med aria-label).
• Forkortelser eller fagtermer som trenger en kort fullform.

Egner seg ikke for

• Innhold brukeren må se for å bruke siden - tooltiper er ikke synlige på berøringsskjermer uten en egen tap-håndtering, og skal derfor aldri være eneste kilde til kritisk informasjon.
• Interaktivt innhold (lenker, knapper) inni boblen - bruk <lm-menu-button> eller en popover-dialog i stedet.

Bruk

<script type="module" src="/designsystem/komponenter/overlegg/tooltip/tooltip.js"></script>

<lm-tooltip>
    <button type="button" slot="trigger" aria-label="Om nøkkeltallet">ⓘ</button>
    Beregnet som gjennomsnitt av de siste 12 månedene.
</lm-tooltip>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Slots

Parts

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-tooltip::part(boble) {
    /* egne stiler for "Selve tooltip-boblen (`role="tooltip"`)." */
}

Tilgjengelighet

Boblen har role="tooltip"; utløser-elementet får aria-describedby (fallback-modus) eller interestfor (native-modus) mot boblens id. Boblen vises ved hover eller tastaturfokus, og skjules ved mouseleave, blur, eller Escape.

• Boblen har role="tooltip" og er alltid tilgjengelig i DOM-en (ikke fjernet, kun skjult), slik at skjermlesere kan lese den via aria-describedby.
• Escape lukker en åpen tooltip uten å flytte fokus bort fra utløser-elementet.
• Tooltipen skal aldri inneholde informasjon brukeren ikke kan få tak i på annen måte - den er et supplement, ikke en primærkilde.

Detaljer

• 300 ms forsinkelse før visning ved hover (fallback-modus) for å unngå at boblen blinker forbi ved rask musebevegelse - fokus viser den umiddelbart, uten forsinkelse.
• Bruker Popover API i "manual"-modus i fallback-tilfellet, samme begrunnelse som <lm-toast>/<lm-menu-button>.

Referanser

Se også:

• ../../handling/menu-button/index.html - brukes i stedet når boblen skal inneholde interaktivt innhold (knapper/lenker).
• ../../../guider/overlegg/index.html - Full oversikt over hvorfor tooltip bruker interestfor+popover, og når et popover/dialog passer bedre.

Avhengigheter: Ingen