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.
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.
Do: Finn gode løsninger for å vise mye innhold som er tilpasset situasjonen.
Don't: Det er ikke brukervennlig eller lov til å vise skjult innhold med tooltip.
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.
Do: Her er feilmeldingen synlig ved siden av tingen som har feilen.
Don't: Denne feilmeldingen dekker ikke UU-krav
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
Hva er dette?
Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.
