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
Vurder noe annet:
- Vise rikt innhold
- Vise skjult innhold
- Vise viktig innhold
Har du innspill til komponenten?
Send forslagEksempler
Tips
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
Flater
Mobil
Tooltip aktiveres av fokusmarkering eller hover og vil ikke være noe som dukker opp på mobil.
Tilgjengelighet
Interaksjon 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 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 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 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.
Bruk
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.
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.
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>
- 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 |
