Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

Popover

Popover er et skjult panel koblet til et element. Popoveren vil legge seg over alle andre elementer i grensesnittet. Du styrer selv når og hvordan den skal vises og skjules.

StabilOppdatert 9. mai 2025
Github FigmaEndringslogg

Egnet til:

  • Å vise informasjon om elementer eller situasjoner.

Uegnet til:

  • Å beskrive handlinger eller elementer (se Tooltip).
  • 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 på det!

Tilgjengelighet

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

Interaksjon med skjermleser

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

Props

Popover benytter seg av Floating UI.

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

arrow?

  • Type:
    boolean
  • Default:
    true
  • Description:

    Adds a arrow from dialog to anchor when true

offset?

  • Type:
    number
  • Default:
    16 w/arrow, 4 w/no-arrow
  • 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

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<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

Popover.Content

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<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

Tokens

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.

TokenFallback
--ac-popover-bg--a-surface-default
--ac-popover-border--a-border-default