Komponenter / Core

HelpText

Oppdatert 4. august 2023Stabil

Github Yarn Figma Endringslogg

HelpText gir brukere en forklaring på ukjente begreper eller konsepter, som vises når de trenger det.

Egnet til:

Tips og råd
Forklare begreper

Uegnet til:

Mye informasjon
Rikt innhold og innhold med interaksjon

Har du innspill til komponenten?

Send forslag

Eksempler

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, vis innholdet i et nytt panel eller link til utdypende informasjon på en annen side.

Tilgjengelighet

Interaksjon med mus

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

Interaksjon med 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 med 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 med 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
wrapperClassName? string: Classname for wrapper
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>: 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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom; 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 eller utforsk alle design tokens.