Tooltip brukes for å beskrive eller legge til tilleggsinformasjon til brukeren ved hover eller fokus på elementer.
Du wrapper <Tooltip /> rundt elementet du ønsker at skal ha en tooltip.
Obs: Plasseringen av tooltip baserer seg på ref,
så pass derfor på at komponenten som wrappes støtter forwardRef. Les mer om dette her.
Om man sender med isOpen så får Tooltip en lukkeknapp for å håndtere situasjoner hvor man ønsker kontrollere visningen av Tooltip.
Tooltip brukes for å beskrive eller legge til tilleggsinformasjon når brukeren hovrer eller fokuserer på interaktive elementer som knapper, lenker, ikonknapper eller ikke-interaktive elementer som ikoner og tekst. En tooltip bør kun ha en kortfattet setning på en enkelt tekstlinje.
På mobile flater vises en tooltip først når en bruker klikker på elementet. Den blir borte hvis brukeren klikker utenfor tooltip’en. Siden tooltips skjuler informasjonen, så bør det brukes sparsommelig. For kompleks informasjon og setninger som går over flere tekstlinjer, bruk heller Popover eller Drawer.
Bruk hvis du vil gi et lite hint om hvordan eller hva et element på siden gjør.
Bruk hvis et interaktivt element (knapp, label, ikon) har ingen beskrivende tekst og dette elementet trenger en kort forklaring.
Bruk hvis det er lite plass, for mye informasjon til å ha det inline og hvis det skaper for mye rot å vise den med en gang.
Unngå bruk av interaktive elementer som lenker elle rknapper i en tooltip. Vurder heller å bruke en Popover
Unngå tooltip for å kommunisere og varsle om viktig og kritisk informasjon eller feilmeldinger i skjemaer. Vurder å bruk Modaler eller Alerts.
Ikke overdriv bruken av tooltips. For mange vil enten overvelde eller irritere brukeren.
import { Tooltip } from '@entur/tooltip';Denne komponenten har ingen props