docs(popover): web-first (#4853)

Thunear · Barsnes · web-flow · commit e0f426271ae2 · 2026-05-11T09:03:11.000+02:00
Co-authored-by: Tobias Barsnes &lt;tobias.barsnes@digdir.no&gt;
diff --git a/apps/www/app/content/components/popover/en/code.mdx b/apps/www/app/content/components/popover/en/code.mdx
@@ -1,59 +1,7 @@
-<Story story="PreviewEn" />
-<ReactComponentDocs />
+<Story story="PreviewEn" defaultOpen />
 
 ## Use
-
-```tsx
-import { Popover } from '@digdir/designsystemet-react';
-
-// with context
-<Popover.TriggerContext>
-<Popover.Trigger>Trigger</Popover.Trigger>
-<Popover>Content</Popover>
-</Popover.TriggerContext>
-
-// without context with own trigger
-<Button popovertarget="my-popover">Trigger</Button>
-<Popover id="my-popover">Content</Popover>
-```
-
-### React and `popovertarget`
-When you use `Popover` without `Popover.TriggerContext`, you connect the trigger and `Popover` yourself.
-In this case, `popovertarget` is used in lowercase, so that all versions of React correctly render the attribute.
-When you use `@digdir/designsystemet-react` we extend `@types/react-dom` to accept this.
-
-### Polyfill
-
-`Popover` uses [popover (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover).
-This api is classified as [Baseline: Newly available (mozilla.org)](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) as of April 2024, when Firefox was the last browser to add it.
-In some cases, you may find that users are locked to older browser versions for various reasons, and then it may be appropriate to add a [Popover-Polyfill (github.com)](https://github.com/oddbird/popover-polyfill) to ensure that `Popover` works for everyone.
-
-## Examples
-
-### Standard
-
-<Story story="PreviewEn" />
-
-### Inline trigger
-
-<Story story="DottedUnderlineEn" />
-
-### Controlled
-You can control when the popover is opened or closed.
-
-Note that we do not use `onClick` on the trigger, the dropdown handles this internally and sends to `onOpen` and `onClose`.
-
-<Story story="ControlledEn" />
-
-### Without TriggerContext
-You can also use Popover without TriggerContext by using `popovertarget`:
-
-<Story story="WithoutContextEn" />
-
-## HTML
-
-You can use `popover` in plain HTML by using the `popover` attribute on an element and connecting it to a trigger with `popovertarget`.
-
+You can use popover in plain HTML by using the `popover` attribute on an element and connecting it to a trigger with `popovertarget`.
 The class name `ds-popover` is applied to the element that is the popover.
 
 When you use `@digdir/designsystemet-web`, we add a listener that automatically positions the popover correctly using `floating-ui`.
@@ -76,9 +24,18 @@ Content
 </div>
 ```
 
-`data-placement` is used to position the arrow correctly.
-This attribute is related to a `plugin` we have created for `floating-ui`.
-It is portable to others who use `floating-ui`, and you can find [the code on github.com](https://github.com/digdir/designsystemet/blob/f6bf5a2c84baa2bfd92207510cb6c0a00573ea61/packages/react/src/components/popover/popover.tsx#L209).
+### Polyfill
+Popover uses [popover (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover).
+This api is classified as [Baseline: Newly available (mozilla.org)](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) as of April 2024, when Firefox was the last browser to add it.
+In some cases, you may find that users are locked to older browser versions for various reasons, and you might want to add a [Popover-Polyfill (github.com)](https://github.com/oddbird/popover-polyfill) to ensure that popover works for everyone.
+
+
+## Examples
+
+### Without TriggerContext
+You can also use Popover without TriggerContext by using `popovertarget`:
+
+<Story story="WithoutContextEn" />
 
 ### Inline popover
 
@@ -103,7 +60,38 @@ popover="manual"
 ```
 
 ## CSS variables and data attributes
-
+Sizes are controlled with [data-size](/en/fundamentals/code/sizes) and colors with [data-color](/en/fundamentals/code/colors). 
+The component will inherit from the closest parent where these are set.
 <CssVariables />
 
 <CssAttributes />
+
+
+## React
+
+```tsx
+import { Popover } from '@digdir/designsystemet-react';
+
+// with context
+<Popover.TriggerContext>
+  <Popover.Trigger>Trigger</Popover.Trigger>
+  <Popover>Content</Popover>
+</Popover.TriggerContext>
+
+// without context with own trigger
+<Button popovertarget="my-popover">Trigger</Button>
+<Popover id="my-popover">Content</Popover>
+```
+### React and `popovertarget`
+When you use popover without `TriggerContext`, you connect the trigger and popover yourself.
+In this case, `popovertarget` is used in lowercase, so that all versions of React correctly render the attribute.
+When you use `@digdir/designsystemet-react` we extend `@types/react-dom` to accept this.
+
+### Controlled example
+You can control when the popover is opened or closed.
+
+Note that we do not use `onClick` on the trigger, the dropdown handles this internally and sends to `onOpen` and `onClose`.
+
+<Story story="ControlledEn" language="react" />
+
+<ReactComponentDocs />
diff --git a/apps/www/app/content/components/popover/en/overview.mdx b/apps/www/app/content/components/popover/en/overview.mdx
@@ -4,36 +4,36 @@ search_terms: overlay, tooltip, helptext, explanation, pop-up
 
 <Story story="PreviewEn" />
 
-**Use `Popover` when**
-- you need to provide additional explanations that require more space than a short [`Tooltip`](/en/components/docs/tooltip/overview), such as definitions or detailed instructions
+**Use popover when**
+- you need to provide additional explanations that require more space than a short [tooltip](/en/components/docs/tooltip/overview), such as definitions or detailed instructions
 - context-specific help is needed that users can open and close without leaving the page
 - supplementary information should be shown that is not critical for completing the task, but may be useful for some users
 
-**Avoid `Popover` when**
-- you need to describe a symbol or keyboard shortcut; use [`Tooltip`](/en/components/docs/tooltip/overview) instead
-- the purpose is navigation or choosing between options; use [`Dropdown`](/en/components/docs/dropdown/overview) instead
+**Avoid popover when**
+- you need to describe a symbol or keyboard shortcut; use [tooltip](/en/components/docs/tooltip/overview) instead
+- the purpose is navigation or choosing between options; use [dropdown](/en/components/docs/dropdown/overview) instead
 - the content is intended to appear on hover
 
 ## Example
 
-### Interactive `Popover`
+### Interactive popover
 
-A `Popover` may contain buttons and other interactive elements.
+Popover may contain buttons and other interactive elements.
 
 <Story story="InteractiveEn" />
 
 ### Inline trigger
-You can use a `Popover` inline within text, marked with a dotted underline, for example when explaining a term.
+
+You can use popover inline within text, marked with a dotted underline, for example when explaining a term.
 
 <Story story="DottedUnderlineEn" />
 
 ## Guidelines
-
-`Popover` is used to display more detailed or interactive supplementary information without taking the user out of context. It can be used as an extended solution when a [`Tooltip`](/en/components/docs/tooltip/overview) is not sufficient. `Popover` is opened through an intentional user click and may contain text, links and simple form elements. The content should be short, relevant, and not critical for completing the task.
+Popover is used to display more detailed or interactive supplementary information without taking the user out of context. It can be used as an extended solution when a [tooltip](/en/components/docs/tooltip/overview) is not sufficient.
+Popover is opened through an intentional user click and may contain text, links and simple form elements. The content should be short, relevant, and not critical for completing the task.
 
 ### Placement
-
-`Popover` can be placed as needed, and will automatically stay within the visible browser area. This behaviour can be disabled using `autoPlacement`.
+Popover can be placed as needed, and will automatically stay within the visible browser area. This behaviour can be disabled using `autoPlacement`.
 
 ## Text
 
diff --git a/apps/www/app/content/components/popover/metadata.json b/apps/www/app/content/components/popover/metadata.json
@@ -1,11 +1,11 @@
 {
   "no": {
     "title": "Popover",
-    "subtitle": "`Popover` vises over andre elementer i grensesnittet og er koblet til et spesifikt element. Den brukes til å vise tilleggsinformasjon, interaktive elementer eller korte forklaringer uten å navigere bort fra siden."
+    "subtitle": "Popover vises over andre elementer i grensesnittet og er koblet til et spesifikt element. Den brukes til å vise tilleggsinformasjon, interaktive elementer eller korte forklaringer uten å navigere bort fra siden."
   },
   "en": {
     "title": "Popover",
-    "subtitle": "`Popover` appears above other elements in the interface and is linked to a specific element. It is used to display additional information, interactive elements, or brief explanations without navigating away from the page."
+    "subtitle": "Popover appears above other elements in the interface and is linked to a specific element. It is used to display additional information, interactive elements, or brief explanations without navigating away from the page."
   },
   "image": "Popover.svg",
   "cssFile": "popover.css"
diff --git a/apps/www/app/content/components/popover/no/code.mdx b/apps/www/app/content/components/popover/no/code.mdx
@@ -1,58 +1,7 @@
-<Story story="Preview" />
-<ReactComponentDocs />
+<Story story="Preview" defaultOpen />
 
 ## Bruk
-
-```tsx
-import { Popover } from '@digdir/designsystemet-react';
-
-// med context
-<Popover.TriggerContext>
-  <Popover.Trigger>Trigger</Popover.Trigger>
-  <Popover>Content</Popover>
-</Popover.TriggerContext>
-
-// uten context med egen trigger
-<Button popovertarget="my-popover">Trigger</Button>
-<Popover id="my-popover">Content</Popover>
-```
-
-### React og `popovertarget`
-Når du bruker `Popover` uten `Popover.TriggerContext`, kobler du selv sammen utløseren og `Popover`.
-Da brukes `popovertarget` i små bokstaver, slik at alle versjoner av React korrekt gjengir attributtet.
-Når du bruker `@digdir/designsystemet-react` utvider vi `@types/react-dom` til å akseptere dette.
-
-### Polyfill
-
-`Popover` bruker [popover (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover).
-Dette apiet er klassifisert som [Baseline: Newly available (mozilla.org)](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) fra april 2024, da Firefox som siste nettleser la det til.
-I noen tilfeller kan en oppleve at brukere av ulike grunner er låst til eldre nettleserversjoner, og da kan det være aktuelt å legge til en [Popover-Polyfill (github.com)](https://github.com/oddbird/popover-polyfill) for å sikre at `Popover` fungerer for alle.
-
-
-## Eksempler
-
-### Standard
-
-<Story story="Preview" />
-
-### Inline trigger
-Du kan bruke Popover inline i tekst med stiplet understrek:
-<Story story="DottedUnderline" />
-
-### Kontrollert
-Du kan kontrollere når popover er åpen eller lukket.
-
-Merk at vi ikke bruker `onClick` på triggeren, dropdownen håndterer dette internt on sendet til `onOpen` og `onClose`.
-
-<Story story="Controlled" />
-
-### Uten TriggerContext
-Du kan også bruke Popover uten TriggerContext ved å bruke `popovertarget`:
-<Story story="WithoutContext" />
-
-## HTML
-
-Du kan bruke `popover` i ren HTML ved å bruke `popover`-attributtet på et element og koble det til en trigger med `popovertarget`.
+Du kan bruke popover i ren HTML ved å bruke `popover`-attributtet på et element og koble det til en trigger med `popovertarget`.
 Klassenvnet `ds-popover` blir brukt på elementet som er popoveren.
 
 Når du bruker `@digdir/designsystemet-web` legger vi på en listener som automatisk plasserer popoveren riktig ved hjelp av `floating-ui`. 
@@ -74,6 +23,18 @@ Vi anbefaler å lese om [popover (mozilla.org)](https://developer.mozilla.org/en
 </div>
 ```
 
+### Polyfill
+Popover bruker [popover (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover).
+Dette apiet er klassifisert som [Baseline: Newly available (mozilla.org)](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) fra april 2024, da Firefox som siste nettleser la det til.
+I noen tilfeller kan en oppleve at brukere av ulike grunner er låst til eldre nettleserversjoner, og da kan det være aktuelt å legge til en [Popover-Polyfill (github.com)](https://github.com/oddbird/popover-polyfill) for å sikre at popover fungerer for alle.
+
+
+## Eksempler
+
+### Uten TriggerContext
+Du kan også bruke Popover uten TriggerContext ved å bruke `popovertarget`:
+<Story story="WithoutContext" />
+
 ### Inline popover
 
 Dersom du vil ha triggeren inline i tekst må du fortsatt bruke `<button>`, men du kan legge på `data-popover="inline"` for å få riktig styling.
@@ -97,7 +58,38 @@ Dersom du vil ha triggeren inline i tekst må du fortsatt bruke `<button>`, men
 ```
 
 ## CSS variabler og data-attributter
-
+Størrelser styres med [data-size](/no/fundamentals/code/sizes) og farger med[data-color](/no/fundamentals/code/colors). 
+Komponenten vil arve fra nærmeste forelder med disse satt.
 <CssVariables />
 
 <CssAttributes />
+
+
+## React 
+
+```tsx
+import { Popover } from '@digdir/designsystemet-react';
+
+// med context
+<Popover.TriggerContext>
+  <Popover.Trigger>Trigger</Popover.Trigger>
+  <Popover>Content</Popover>
+</Popover.TriggerContext>
+
+// uten context med egen trigger
+<Button popovertarget="my-popover">Trigger</Button>
+<Popover id="my-popover">Content</Popover>
+```
+### React og `popovertarget`
+Når du bruker popover uten `TriggerContext`, kobler du selv sammen utløseren og popover.
+Da brukes `popovertarget` i små bokstaver, slik at alle versjoner av React korrekt gjengir attributtet.
+Når du bruker `@digdir/designsystemet-react` utvider vi `@types/react-dom` til å akseptere dette.
+
+### Eksempel på kontrollert
+Du kan kontrollere når popover er åpen eller lukket.
+
+Merk at vi ikke bruker `onClick` på triggeren, dropdownen håndterer dette internt on sendet til `onOpen` og `onClose`.
+
+<Story story="Controlled" language="react" />
+
+<ReactComponentDocs />
diff --git a/apps/www/app/content/components/popover/no/overview.mdx b/apps/www/app/content/components/popover/no/overview.mdx
@@ -4,34 +4,36 @@ search_terms: infoboks, hjelpetekst, forklaring, overlay, tooltip, helptext, exp
 
 <Story story="Preview" />
 
-**Bruk `Popover` når** 
-* du skal gi utfyllende forklaringer som krever mer plass enn en kort [`Tooltip`](/no/components/docs/tooltip/overview), f.eks. definisjoner eller utdypende instruksjoner
+**Bruk popover når** 
+* du skal gi utfyllende forklaringer som krever mer plass enn en kort [tooltip](/no/components/docs/tooltip/overview), f.eks. definisjoner eller utdypende instruksjoner
 * det trengst kontekstspesifikk hjelp som brukeren kan velge å åpne/lukke uten å forlate siden
 * tilleggsinformasjon som ikke er kritisk for å fullføre oppgaven skal visest, men som kan være nyttig for enkelte brukere
 
-**Unngå `Popover` når**
-* du skal beskrive et symbol eller tastatursnartvei, bruk heller [`Tooltip`](/no/components/docs/tooltip/overview)
-* det skal være navigasjon eller valg av alternativer, bruk heller [`Dropdown`](/no/components/docs/dropdown/overview)
+**Unngå popover når**
+* du skal beskrive et symbol eller tastatursnartvei, bruk heller [tooltip](/no/components/docs/tooltip/overview)
+* det skal være navigasjon eller valg av alternativer, bruk heller [dropdown](/no/components/docs/dropdown/overview)
 * du skal vise innhold ved `hover`
 
 ## Eksempel
-### Interaktiv `Popover`
 
-`Popover` kan inneholde knapper og andre interaktive elementer.
+### Interaktiv popover
+
+Popover kan inneholde knapper og andre interaktive elementer.
 
 <Story story="Interactive" />
 
 ### Ordforklaring
 
-Du kan bruke `Popover` inline i tekst med stiplet understrek, for eksempel når du skal forklare et begrep.
+Du kan bruke popover inline i tekst med stiplet understrek, for eksempel når du skal forklare et begrep.
 
 <Story story="DottedUnderline" />
 
 ## Retningslinjer
-`Popover` brukes for å vise mer detaljert eller interaktiv tilleggsinformasjon uten å ta brukeren bort fra konteksten. Den kan brukes som en utvidet løsning når [`Tooltip`](/no/components/docs/tooltip/overview) ikke strekker til. `Popover` åpnes ved et bevisst brukerklikk og kan inneholde både tekst, lenker og enkle skjemaelementer. Innholdet bør være kort og relevant, og ikke kritisk for å fullføre oppgaven.
+Popover brukes for å vise mer detaljert eller interaktiv tilleggsinformasjon uten å ta brukeren bort fra konteksten. Den kan brukes som en utvidet løsning når [tooltip](/no/components/docs/tooltip/overview) ikke strekker til. 
+Popover åpnes ved et bevisst brukerklikk og kan inneholde både tekst, lenker og enkle skjemaelementer. Innholdet bør være kort og relevant, og ikke kritisk for å fullføre oppgaven.
 
 ### Plassering
-`Popover` plasseres etter ønske, men holder seg automatisk innenfor det synlige området i nettleseren. Denne oppførselen kan deaktiveres med `autoPlacement`.
+Popover plasseres etter ønske, men holder seg automatisk innenfor det synlige området i nettleseren. Denne oppførselen kan deaktiveres med `autoPlacement`.
 
 ## Tekst 
 Unngå lange tekster og kompliserte forklaringer. I noen tilfeller er det kanskje bedre å lenke til en annen side med utdypende informasjon om temaet.
