Hopp til innhold
Aksel

Komponenter

Popover

Popover er et panel som er koblet til et element, og vises og skjules ved brukerinteraksjon. Popoveren vil legge seg over alle andre elementer i grensesnittet.

Egnet til:

  • Vise ekstra informasjon

Uegnet til:

  • Å beskrive handlinger eller elementer (se Tooltip)
  • Ordforklaring (bruk Lookup)
  • Meny med handlinger/lenker (bruk ActionMenu)
  • Mye innhold
  • Vise innhold ved hover

Eksempler

Komponenten brukes i

Retningslinjer

Ikke åpne på hover

Popover kan ikke åpnes på :hover i dag. For å støtte dette vil interaksjonen og oppførselen til komponenten være så ulik dagens Popover, at dette i praksis vil være en ny komponent.

Det er også en teknisk begrensning med at dagens løsning ikke kan brukes sammen med “inline” innhold som f.eks. lenker i løpende tekst. Vi ønsker heller å utvikle en egen komponent som løser hover bra for dette, så hvis det er noe du eller teamet ditt trenger ønsker vi gjerne tilbakemelding om det!

Bruk aria-expanded

Elementet som åpner popoveren bør bruke aria-expanded=true/false for å indikere om den er åpen eller ikke.

Plassering i DOM

Popoveren bør helst ligge rett etter elementet som åpner den i DOM-en.

Tokens

Komponent-tokens ble fjernet i versjon 8

Gammel dokumentasjon for disse finner du på jsDelivr

Props

Popover

children

  • Type:
    ReactNode
  • Description:

    Popover content

anchorEl

  • Type:
    Element | null
  • Description:

    Element popover anchors to

open

  • Type:
    boolean
  • Description:

    Open state

onClose

  • Type:
    () => void
  • Description:

    onClose callback

placement?

  • Type:
    "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"
  • Default:
    top
  • Description:

    Default orientation of popover

    Try to keep general usage to "top", "bottom", "left", "right".

offset?

  • Type:
    number
  • Default:
    8
  • Description:

    Distance from anchor to popover

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

flip?

  • Type:
    boolean
  • Default:
    true
  • Description:

    Changes placement of the floating element in order to keep it in view.

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLDivElement>
  • 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

arrow?

  • Deprecated:
    No longer has any effect.
  • Type:
    boolean

Popover.Content

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLDivElement>
  • 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

Forvalter

Team
Aksel
Artikkel oppdatert 23. september 2026
Send innspill
Om du har noen innspill eller tilbakemeldinger kan du sende dem inn på GitHub.
Send innspill
Slack
For lavterskel deling og hjelp kan du bruke Slack-kanalen for å stille spørsmål og diskutere løsninger.
Slack