Hopp til innhold
Aksel

Komponenter

Lookup

Lookup brukes til å forklare ord og begreper direkte i løpende tekst. Komponenten gjør et ord eller en kort tekst klikkbar, og åpner en Popover med en forklaring når brukeren aktiverer den.

PreviewOppdatert 26. juni 2026
GithubEndringslogg

Preview

Dette er første versjon av denne komponenten. Den vil kunne få brekkende endringer utenom major-versjoner.

Kom gjerne med tilbakemeldinger på Slack eller Github.

Egnet til:

  • Forklare ord og begreper direkte i løpende tekst.
  • Forklare uten at brukeren må forlate konteksten.

Uegnet til:

  • Lange forklaringer eller mye innhold.

Eksempler

Retningslinjer

Bruk Lookup til korte forklaringer

Lookup skal hjelpe brukeren å forstå et ord eller begrep uten å bryte leseflyten. Forklaringen bør være kort og direkte knyttet til teksten brukeren har aktivert.

Hvis forklaringen blir lang, bør du vurdere en annen løsning, for eksempel ReadMore, et eget avsnitt eller en lenke til mer informasjon.

Ikke skjul viktig informasjon

Innholdet i Lookup er skjult frem til brukeren klikker på teksten. Du må derfor ikke regne med at alle brukere får det med seg. Informasjon som er avgjørende for å forstå eller fullføre en oppgave bør stå synlig i grensesnittet.

Bruk korte og presise triggertekster

Teksten som åpner Lookup må være selve ordet eller begrepet som forklares.

Ikke bruk Lookup for ofte

Mange Lookup-elementer i samme tekst kan gjøre teksten urolig og vanskelig å lese. Bruk komponenten der forklaringen faktisk hjelper brukeren. Hvis mange begreper trenger forklaring, bør du vurdere å skrive om teksten eller forklare begrepene samlet.

Innhold i Popover

Popoveren kan inneholde rikt innhold, men bør fortsatt være enkel og oversiktlig. Innholdet bør som hovedregel være:

  • kort og konkret
  • skrevet i klart språk
  • direkte knyttet til begrepet
  • uten unødvendige detaljer

Lenker kan brukes hvis brukeren trenger mer informasjon, men de må ikke erstatte selve forklaringen.

Tilgjengelighet

Interaksjon med tastatur

Lookup kan tabbes til og åpnes ved Enter, og deretter lukkes igjen med Escape-knappen.

Fokushåndtering

Når man trykker på Lookup vil tittelen i popover få fokus. Når man lukker popoveren vil Lookup igjen få fokus.

Props

Lookup

children

  • Type:
    ReactNode
  • Description:

    Children, explanation popover to lookup word

word

  • Type:
    string
  • Description:

    Lookup word

open?

  • Type:
    boolean
  • Description:

    Controlled open-state.

    Using this removes automatic control of open-state.

defaultOpen?

  • Type:
    boolean
  • Default:
    false
  • Description:

    The open state when initially rendered. Use when you do not need to control the open state.

onOpenChange?

  • Type:
    ((open: boolean) => void)
  • Description:

    Callback for current open-state.

className?

  • Type:
    string

strategy?

  • Type:
    "absolute" | "fixed"
  • Default:
    "absolute"
  • Description:

    Changes what CSS position property to use You want to use "fixed" if reference element is inside a fixed container, but popover is not

ref?

  • Type:
    Ref<HTMLSpanElement>
  • Description:

    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). React Docs

Tokens

Komponent-tokens ble fjernet i versjon 8

Gammel dokumentasjon for disse finner du på jsDelivr