Intro
En tooltip er en liten boks med tekst som aktiveres på fokus eller hover. Tooltip oppsummerer innholdet eller bruken.
Egnet til:
- Beskrive et interaktiv element
- Beskrive handlingen et interaktivt element gjør
Uegnet til:
- Vise rikt innhold
- Vise skjult innhold
- Vise viktig innhold
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
Farger
Tooltip har bare en mørk variant for nå, men vil komme en lysere versjon etterhvert som kan brukes på mørke bakgrunner. Tooltip som den er i dag bør ikke brukes på mørke bakgrunner da kontrasten blir for lav.
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 og vil ikke være noe som dukker opp på mobil.
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 ReactElement<any, string | JSXElementConstructor<any>> & RefAttributes<HTMLElement>
- Element tooltip anchors to @note Needs to be React.ReactElement, does not support multiple children/react fragment
- open? boolean
- Open state for contolled tooltip
- defaultOpen?boolean
- Tells tooltip to start in open state. Use sparingly synce hover/focus on other elements will close it @note "open"-prop overwrites this
- placement?"top" | "right" | "bottom" | "left"
- Orientation for tooltip
- arrow?boolean
- Toggles rendering of arrow
- offset?number
- Distance from anchor to tooltip
- content string
- Text-content inside tooltip
- maxChar?number
- Sets max allowed character length.
- delay?number
- Adds a delay in milliseconds before opening tooltip
- keys? string[]
- List of Keyboard-keys for shortcuts
- className? string
- ref? Ref<HTMLDivElement>
- 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
- Tooltip extends HTMLDivElement
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 |
