Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

Tooltip

Oppdatert 4. august 2023Stabil
GithubYarn FigmaEndringslogg

    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

    Uegnet til:

    • Vise rikt innhold
    • Vise skjult innhold
    • Vise viktig innhold

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Åpne eksempel i nytt vindu

    tipsTips

    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

    Retningslinjer

    Mobil

    Tooltip aktiveres av fokusmarkering eller hover og vil ikke være noe som dukker opp på mobil.

    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.

    NyheterRelevante lenker

    • Popover

    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.

    GjørEkstra høy tabell-celle med mye tekst
    Finn gode løsninger for å vise mye innhold som er tilpasset situasjonen.
    UnngåTooltip brukt til å vise skjult innhold
    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.

    GjørTekstfelt med feilmelding under
    Her er feilmeldingen synlig ved siden av tingen som har feilen.
    UnngåTekstfelt med feilmelding i en tooltip
    Denne feilmeldingen dekker ikke UU-krav

    Tilgjengelighet

    Interaksjon med 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 med 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 med tastatur

    Tooltip vises når et element får tastaturfokus. Den blir borte når elementet mister fokus.

    KommandoInteraksjon
    TabÅpner og lukker tooltip
    EscLukker en åpen tooltip
    SpaceLukker en åpen tooltip
    EnterLukker en åpen tooltip

    Interaksjon med 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.

    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

    TokenFallback
    --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.

    Relaterte komponenter

    • Popover thumbnail
      Popover

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack