HelpText
Intro
HelpText gir brukere en forklaring på ukjente begreper eller konsepter, som vises når de trenger det.
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, siden det ikke er noen lukkeknapp.
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.
Plassering i HTML
Popoveren rendres som en <div>. Komponenten kan derfor ikke nestes i for eksempel en <p>-tag, som bare tillater phrasing content.
Tilgjengelighet
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 skjermleser
Merk at innholdet i HelpText ikke blir lest opp automatisk i det brukeren aktiverer ikonet, siden komponenten hverken flytter fokus eller bruker en ARIA live region.
Props
Helptext
title?
- Type:
string - Default:"Mer informasjon"
- Description:
wrapperClassName?
- Type:
string - Description:
className?
- Type:
string
strategy?
- Type:
"absolute" | "fixed" - Default:absolute
- Description:
placement?
- Type:
"top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" - Default:"top"
- Description:
ref?
- Type:
LegacyRef<HTMLButtonElement> - Description:
Tokens
| Token | Fallback |
|---|---|
| --ac-help-text-popover-bg | --a-surface-info-subtle |
| --ac-help-text-button-color | --a-surface-action |
| --ac-help-text-button-hover-color | --a-surface-action-hover |
| --ac-help-text-button-active-color | --a-surface-action-active |
