Intro
En tooltip er en liten boks med tekst som aktiveres på fokus eller hover. Tooltip beskriver et interaktivt element eller handlingen det utfører.
Egnet til:
- Beskrive et interaktiv element
- Beskrive handlingen et interaktivt element gjør
Uegnet til:
- Forklare noe
- Vise skjult innhold
- Vise meldinger eller advarsler
- Alt-tekst eller title
Eksempler
Elementet du bruker tooltip'en på bør være forståelig uten tooltip'en. Tooltip’ens rolle er å øke forståelsen av et element, ikke være det som gjør et element forståelig.
Varianter
Plassering av piler
Vurder plasseringen av elementet som skal vise tooltipen, og bruk pil i riktig retning. Sørg for at tooltipen ikke havner utenfor skjermen og er lett å lese. I kode vil pilplasseringen justere seg selv ut fra hvor det er plass til tooltipen.
Innhold
En tooltip kan inneholde 2 ting:
- Kort tekst
- Tastatursnarveier
Retningslinjer
Mobil
Tooltip aktiveres av fokusmarkering eller hover. Dette gjør komponenten mindre egnet for touch-enheter.
Uegnet til rikt innhold
Det kan være behov for å vise innhold knyttet til noe på en side. For eksempel en blokk med tekst og/eller rikt innhold som bilder, videoer, knapper, osv. En tooltip er ikke designet eller kodet til å håndtere dette. Det er derimot popover perfekt til.
Relevante 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 dessverre ikke en god løsning for dette, fordi brukeren ikke har kontroll på det som dukker opp. Det beste er å designe grensesnittet slik at innholdet er eller kan gjøres synlig for brukeren.
Uegnet til hjelpetekst og feilmeldinger
Om bruker trenger hjelp bør det vises hele tiden i nærheten av det bruker trenger hjelp til. Det er ikke brukervennlig å bruke tooltip til den type informasjon.
Tilgjengelighet
Interaksjon med mus
Tooltip vises når et element får hover. Du kan føre musa over tooltip'en uten at den blir borte. Når elementet eller selve tooltipen mister hover, blir den borte.
Interaksjon med touch
Når brukere interagerer med touch, får ikke elementer en hover- eller tastaturfokus-tilstand. Tooltip'en vises derfor bare når brukeren trykker på elementet. Den fjernes ved å trykke utenfor elementet og tooltip'ens areal.
Interaksjon med tastatur
Tooltip vises når et element får tastaturfokus. Den blir borte når elementet mister fokus.
Kommando | Interaksjon |
---|---|
Tab | Åpner og lukker tooltip |
Esc | Lukker en åpen tooltip |
Space | Lukker en åpen tooltip |
Enter | Lukker en åpen tooltip |
Interaksjon med skjermleser
For å tilby en tilsvarende brukeropplevelse, har vi designet Tooltip'en slik at den ikke blir lest opp når skjermleseren leser gjennom siden. Den bare blir lest opp når tooltip'ens utløsende element 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:
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 |