Intro
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
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.
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
- placement?"top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"
- className? string
- strategy?"absolute" | "fixed"
- ref? Ref<HTMLButtonElement>
- Adds a title-tooltip with the given text
- Default dialog-placement on open
- Changes what CSS position property to use
You want to use "fixed" if reference element is inside a fixed container, but popover is not
- Helptext extends HTMLButtonElement
Tokens
| Token | Fallback |
| --ac-help-text-button-color | --a-surface-action |
| --ac-help-text-popover-bg | --a-surface-info-subtle |