Gå til hovedinnhold
KOMPONENTER

Tooltip

npmv2.6.48

Tooltip brukes for å beskrive eller legge til tilleggsinformasjon til brukeren ved hover eller fokus på elementer.

npm install @entur/tooltip
@import '@entur/tooltip/dist/styles.css';

Komponenter

Tooltip

import { Tooltip } from '@entur/tooltip';
NavnTypeDefault-verdiBeskrivelse
placement"bottom-right" | "top-right" | "right" | "bottom" | "left" | "top" | "top-left" | "bottom-left"

Plassering av tooltip-en

contentReactNode

Innholdet i tooltip-boksen

children?ReactElement<any, string | JSXElementConstructor<any>> & ReactNode

Elementet som skal ha tooltip-funksjonalitet

isOpen?boolean

Om tooltipen skal vises

className?string

Ekstra klassenavn for tooltip

disableHoverListener?boolean false

Åpner ikke tooltip ved hover-events

disableFocusListener?boolean false

Åpner ikke tooltip ved focus-events

showCloseButton?boolean true

Viser en lukkeknapp om man kontrollerer åpningen av Tooltip vha isOpen

variant?"error"

Valideringsvariant for Tooltip

popperModifiers?Modifier[] [{ name: 'offset', options: { offset: [0, 10]} }]

En array av modifiers som sendes til Popper, rammeverket som brukes til plassering av Tooltip

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-komponenten vår bygger seg på rammeverket Popper. Om du krever f.eks. ytterligere offset for posisjonen av Tooltip'en din, så kan du benytte deg av popperModifiers, og overskrive dette. Les mer om hvilke modifiers som finnes i Popper her.

Retningslinjer for bruk

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.

Prinsipper

Innafor
  • Bruk hvis du vil gi et lite hint om hvordan eller hva et element på siden gjør.
  • Bruk tooltip sparsomt, og hold det kort og konsists,
  • 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.
Uttafor
  • 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.
Rediger denne siden på Bitbucket