Komponenter
Tooltip
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.
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
Tips
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:
- Kort tekst
- Tastatursnarveier
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:
Element tooltip anchors to.
Needs to be React.ReactElement, does not support multiple children/react fragment
open?
- Type:
boolean - Description:
Open state for contolled tooltip
defaultOpen?
- Type:
boolean - Default:
false - Description:
Tells tooltip to start in open state. Use sparingly since hover/focus on other elements will close it.
open-prop overwrites this.
onOpenChange?
- Type:
((open: boolean) => void) - Description:
Change handler for open.
placement?
- Type:
"top" | "right" | "bottom" | "left" - Default:
""top"" - Description:
Orientation for tooltip.
arrow?
- Type:
boolean - Default:
true - Description:
Toggles rendering of arrow.
offset?
- Type:
number - Default:
10px with arrow, 2px without arrow - Description:
Distance from anchor to tooltip.
content
- Type:
string - Description:
Text-content inside tooltip.
maxChar?
- Type:
number - Default:
80 - Description:
Sets max character length.
Ideally you should keep the length of the tooltip to a minimum (80 characters). Currently this prop only emits a warning in the console, which can be squelched by setting this to a larger number. However, before doing so you should try to shorten the content so that it fits into 80 characters.
delay?
- Type:
number - Default:
150 - Description:
Adds a delay in milliseconds before opening tooltip.
keys?
- Type:
string[] - Description:
List of Keyboard-keys for shortcuts.
describesChild?
- Type:
boolean - Default:
false - Description:
When false, Tooltip labels the element, and child-elements content will be ignored by screen-readers. When true, content is added as additional information to the child element.
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs
Tokens
Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.
| 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 |