Tooltip
Intro
En tooltip er en liten boks med tekst som vises på fokus eller hover. Komponenten brukes til å beskrive et interaktivt element eller handlingen det utfører.
Eksempler
Hvis tooltip ikke er eneste form for tekstlig beskrivelse, kan du sette 'describesChild' til 'true'. Tooltip content blir da satt som 'title' (lukket) og 'aria-describedby' (åpen).
Elementet du bruker tooltipen på bør være forståelig uten tooltipen. Tooltipens rolle er å øke forståelsen av et element, ikke være det som gjør et element forståelig.
Retningslinjer
Innhold
En tooltip kan ha to typer innhold:
Mobil
Tooltip aktiveres av fokusmarkering eller hover. Dette gjør komponenten mindre egnet for touch-enheter.
Uegnet til rikt innhold
En tooltip er ikke designet eller kodet til å håndtere mye tekst og/eller rikt innhold som bilder, video, knapper osv. Det er derimot Popover perfekt til.
Lenker
Uegnet til skjult innhold
Av og til har du mer innhold enn det er plass til i grensesnittet. Det kan være fristende å vise dette innholdet raskt og enkelt med noe som spretter opp. Tooltip er ikke en god løsning for dette, blant annet fordi den ikke håndterer mye tekst. Det beste er å designe grensesnittet slik at innholdet er eller kan gjøres synlig for brukeren.
Uegnet til hjelpetekst og feilmeldinger i skjemaer
Hjelpetekster og feilmeldinger i skjemaer bør være synlige hele tiden og vises i nærheten av det bruker trenger hjelp til. Det er ikke brukervennlig å bruke tooltip til den type informasjon.
Tilgjengelighet
Interaksjon med touch
Når brukere interagerer med touch, får ikke elementer hover eller tastaturfokus. Tooltipen vises derfor bare når brukeren trykker på elementet. Den fjernes ved å trykke utenfor elementet og tooltipens areal.
Interaksjon med tastatur
Tooltip vises når et element får tastaturfokus og forsvinner når elementet mister fokus.
Interaksjon med skjermleser
Skjermlesere leser opp tooltipen når elementet får tastaturfokus.
Props
Tooltip
children
- Type:
ReactElement<any, string | JSXElementConstructor<any>> & RefAttributes<HTMLElement> - Description:
open?
- Type:
boolean - Description:
defaultOpen?
- Type:
boolean - Default:false
- Description:
onOpenChange?
- Type:
((open: boolean) => void) - Description:
placement?
- Type:
"top" | "right" | "bottom" | "left" - Default:"top"
- Description:
arrow?
- Type:
boolean - Default:true
- Description:
offset?
- Type:
number - Default:10px with arrow, 2px without arrow
- Description:
content
- Type:
string - Description:
maxChar?
- Type:
number - Default:80
- Description:
delay?
- Type:
number - Default:150
- Description:
keys?
- Type:
string[] - Description:
describesChild?
- Type:
boolean - Default:false
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
Tokens
| Token | Fallback |
|---|---|
| --ac-tooltip-bg | --a-surface-inverted |
| --ac-tooltip-text | --a-text-on-inverted |
| --ac-tooltip-key-bg | --a-surface-neutral |
| --ac-tooltip-key-text | --a-text-on-inverted |
