HelpText

StabilOPPDATERT 15. desember 2022

HelpText er en komponent som skal fases ut på sikt. Vi anbefaler heller å bruke ReadMore, eller lenke til en annen side.

Egnet til å:

Når du vil at brukeren selv skal oppsøke tips og råd

Vurder noe annet:

Om det er mye informasjon kan en egen seksjon eller side være bedre

Har du innspill til komponenten?

Send forslag

Kom i gang som designeraksel.nav.no Installeraksel.nav.no

Eksempler

Åpne i nytt vindu

Retningslinjer

Innhold

Innholdet i HelpText bør være kort og forståelig. Mye tekst kan virke mot sin hensikt. På mobil er HelpText nesten ubrukelig med mye innhold som dekker store deler av skjermen.

Alt for mye tekst i HelpText på mobil — Mye tekst i HelpText tar stor plass på mobil, og bruker har ikke en lukk-mulighet

Om du har mye å forklare bør du vurdere andre virkemidler. For eksempel ta i bruk ReadMore-komponenten eller link til utdypende informasjon. Dette gjelder spesielt for bruk i skjemaer.

Tilgjengelighet

Interaksjon mus

HelpText vises på klikk. HelpText lukkes når brukeren klikker på ikonet eller utenfor popoveren.

Interaksjon touch

Ikonet er ganske lite. Det bør derfor være god avstand til andre interaktive elementer for at det skal være enkelt å åpne HelpText med berøring.

Interaksjon tastatur

HelpText lukker seg automatisk når man flytter fokus fra ikonet.

Kommando	Interaksjon
`Space`	Åpne og lukke hjelpeteksten
`Enter`	Åpne og lukke hjelpeteksten
`Esc`	Lukke hjelpeteksten

Interaksjon skjermleser

Merk at innholdet i HelpText blir ikke lest opp automatisk i det brukeren aktiverer ikonet, siden komponenten hverken flytter fokus eller bruker en ARIA live region.

Props

Helptext

title?string: Adds a title-tooltip with the given text
placement?"top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end": Default dialog-placement on open
className? string
strategy?"absolute" | "fixed": Changes what CSS position property to use You want to use "fixed" if reference element is inside a fixed container, but popover is not
ref? Ref<HTMLButtonElement>: Helptext extends HTMLButtonElement

Tokens

Token	Fallback
--ac-help-text-button-color	--a-surface-action
--ac-help-text-popover-bg	--a-surface-info-subtle

Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår for mer info.