Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • komponenter
      • Page
      • HGrid
      • HStack
      • VStack
      • Box
      • Hide
      • Show
      • Bleed
      • Eksperimenter 🧪
      • Accordion
      • ActionMenuBeta
      • Alert
      • Button
      • Chat
      • Checkbox
      • Chips
      • ComboboxBeta
      • CopyButton
      • DatePicker
      • Dropdown
      • ErrorSummary
      • ExpansionCard
      • FileUpload
      • FormProgressNy
      • FormSummaryNy
      • GuidePanel
      • HelpText
      • InternalHeader
      • Link
      • List
      • Loader
      • Modal
      • MonthPicker
      • Navpoleonskake
      • Pagination
      • Popover
      • ProgressBar
      • Provider
      • Radio
      • ReadMore
      • Search
      • Select
      • Skeleton
      • Stepper
      • Switch
      • Table
      • Tabs
      • Tag
      • Textarea
      • TextField
      • Timeline
      • ToggleGroup
      • Tooltip
      • Typography
      • ConfirmationPanelAvviklet
      • LinkPanelAvviklet
      • PanelAvviklet

Popover

Oppdatert 9. mai 2025Stabil
GithubYarn FigmaEndringslogg

Innhold på siden

  • Intro
  • Eksempler
  • Retningslinjer
    • Ikke åpne på hover
  • Tilgjengelighet
    • Interaksjon med skjermleser
  • Props
    • Popover
    • Popover.Content
  • Tokens

Intro

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.

Egnet til:

  • Å vise informasjon om elementer eller situasjoner.

Uegnet til:

  • Å beskrive handlinger eller elementer (se Tooltip).
  • Mye innhold.
  • Vise innhold ved hover.

Har du innspill til komponenten?

Send forslag

Eksempler

Popover kan kobles til de fleste typer elementer med bruk av ref.

SandboxSandbox
Åpne eksempel i nytt vindu

Offset er avstanden mellom elementet og popoveren, og kan overstyres.

Her kan du teste ulike 'placement'-verdier. Popover styrer selv plassering hvis det ikke er plass i valgt retning.

Popover.Content legger bare på litt padding, så den kan utelates.

LenkerKomponenten brukes i

  • Dropdown
  • DatePicker
  • MonthPicker
  • HelpText

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:

anchorEl

  • Type:
    Element | null
  • Description:

open

  • Type:
    boolean
  • Description:

onClose

  • Type:
    () => void
  • Description:

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:

arrow?

  • Type:
    boolean
  • Default:
    true
  • Description:

offset?

  • Type:
    number
  • Default:
    16 w/arrow, 4 w/no-arrow
  • Description:

strategy?

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

flip?

  • Type:
    boolean
  • Default:
    true
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

Popover.Content

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

Tokens

TokenFallback
--ac-popover-bg--a-surface-default
--ac-popover-border--a-border-default
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

  • DatePicker thumbnail
    DatePicker
  • Dropdown thumbnail
    Dropdown
  • HelpText thumbnail
    HelpText

© 2025 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