Popover
En Popover brukes til å vise kontekstuell informasjon eller handlinger knyttet til et spesifikt element på siden. Popoveren vises når brukeren aktiverer et tilknyttet element, og plasseres i nærheten av dette elementet slik at sammenhengen er tydelig.
Egnet til
Bruk Popover når du trenger å:
- Gi brukeren mer informasjon om et element uten å navigere bort fra siden
- Presentere små mengder innhold som er relevant i øyeblikket
- Tilby enkle handlinger som er direkte knyttet til et spesifikt element
- Forklare valg eller konsekvenser før brukeren utfører en handling
- Vise ekstra detaljer som ikke trenger å være synlige hele tiden
Uegnet til
Ikke bruk Popover når:
- Innholdet er kritisk for å forstå eller fullføre en oppgave
- Informasjonen må være permanent synlig
- Innholdsmengden er stor eller omfattende
- Brukeren må gjennomføre en lengre prosess eller flere steg
- Innholdet krever fullt fokus fra brukeren
Vurder heller Tooltip for korte forklaringer uten handlinger, Modal for komplekse oppgaver, eller Message for informasjon som bør være synlig på siden.
Bruk
Eksempler
Bare tekst
Popover kan vises uten overskrift når innholdet er selvforklarende.
Fire plasseringsretninger
Popover støtter fire plasseringsretninger: top, bottom, left og right. Komponenten flipper automatisk til motsatt side hvis det ikke er nok plass.
Retningslinjer
Svar på det brukeren nettopp trykket på
Innholdet skal handle om trigger-elementet og ingenting annet. En overskrift hjelper når panelet inneholder mer enn et par setninger, men lange tekstblokker hører på siden: en popover legger seg over innholdet og skal kunne leses ferdig raskt.
Hold handlingene til de viktigste
En popover klarer seg fint uten knapper hvis den bare forklarer noe. Har den knapper, skal teksten på dem si hva som skjer («Bytt konto», ikke «OK»), og én av dem skal være tydelig primær. Blir det mange valg, hører de i en DropdownMenu eller en Modal.
La pekeren peke på riktig element
Pekeren er koblingen mellom panelet og det brukeren trykket på, og den vises alltid — den kan ikke skjules. Velg plassering etter hvor det er plass på skjermen, og sjekk at pekeren fortsatt treffer trigger-elementet når panelet clampes mot kanten av viewporten.
Hold én popover åpen om gangen
Panelet åpnes fra trigger-elementet og lukkes med Escape eller klikk utenfor. Åpner du en ny mens en annen står åpen, konkurrerer to paneler om samme oppmerksomhet, og brukeren mister sporet av hva Escape lukker.
Universell utforming
Hva du selv må sørge for
- Trigger-elementet må være en interaktiv kontroll (
<button>eller<a>) - Trigger-elementet må ha et tilgjengelig navn (synlig tekst eller
aria-label) - Innholdet i popoveren skal være relevant og konsist
- Handlingsknapper må ha beskrivende tekst
Hva komponenten gjør automatisk
- Setter
role="dialog"på innholdet - Kobler trigger til popover via
aria-controls - Oppdaterer
aria-expandedogaria-haspopuppå trigger - Håndterer tastaturnavigasjon (Enter/Space for å åpne, Escape for å lukke)
- Flytter fokus til første focusable element ved åpning
- Returnerer fokus til trigger ved lukking med Escape
- Posisjonerer popover automatisk med viewport-clamp
Tastaturnavigasjon
| Tast | Handling |
|---|---|
| Enter / Space | Åpner/lukker popover når trigger har fokus |
| Escape | Lukker popover og returnerer fokus til trigger |
| Tab | Flytter fokus mellom interaktive elementer i popoveren |
Skjermleser
- Ved fokus på trigger: "[knappetekst], knapp, har popup, dialog"
- Ved åpning: "[knappetekst], knapp, har popup, dialog, utvidet" — fokus flyttes til første element i popover
- Ved lukking: Fokus returneres til trigger, skjermleser annonserer trigger igjen
WCAG-kriterier
Sist gjennomgått: 2026-08-14 — alle 56 WCAG 2.2-kriterier vurdert
WCAG-kriterier6 ditt ansvar · 6 håndtert · 8 ikke relevant · 0 ikke på plass
Ditt ansvar (6)
| Kriterium | Nivå | Hva du må gjøre |
|---|---|---|
| 4.1.2 Navn, rolle, verdi | A | Trigger-elementet må være en interaktiv kontroll. Bruk en semantisk <button> eller <a> som trigger. Ikke bruk <div> eller <span> — disse mangler tastaturstøtte og skjermleser-rolle. |
| 4.1.2 Navn, rolle, verdi | A | Trigger-elementet må ha et tilgjengelig navn. Sørg for at knappen som åpner popoveren har synlig tekst eller aria-label. Skjermlesere leser denne teksten sammen med 'har popup'-annonseringen. |
| 2.4.6 Overskrifter og ledetekster | AA | Trigger-elementet må ha et tilgjengelig navn. Sørg for at knappen som åpner popoveren har synlig tekst eller aria-label. Skjermlesere leser denne teksten sammen med 'har popup'-annonseringen. |
| 2.4.4 Formål med lenke (i kontekst) | A | Innholdet i popoveren må være relevant og konsist. Popover-innhold skal være kort og fokusert. Lange tekster eller komplekse interaksjoner bør flyttes til en dialog eller egen side. |
| 2.4.6 Overskrifter og ledetekster | AA | Handlingsknapper må ha beskrivende tekst. Knapper i popoveren skal tydelig beskrive hva handlingen gjør. Unngå generiske tekster som 'OK' eller 'Klikk her'. |
| 3.3.2 Ledetekster eller instruksjoner | A | Handlingsknapper må ha beskrivende tekst. Knapper i popoveren skal tydelig beskrive hva handlingen gjør. Unngå generiske tekster som 'OK' eller 'Klikk her'. |
Håndtert av komponenten (6)
| Kriterium | Nivå | Hva komponenten gjør |
|---|---|---|
| 1.3.1 Informasjon og relasjoner | A | Komponenten setter role="dialog" på innholdet og kobler trigger til popover via aria-controls. Forholdet mellom trigger og popover formidles programmatisk. |
| 2.1.1 Tastatur | A | Popover kan åpnes og lukkes med tastatur (Enter/Space på trigger, Escape for å lukke). Ingen museavhengige interaksjoner. |
| 2.1.2 Ingen tastaturfelle | A | Fokus trappes ikke i popoveren — brukeren kan tabbe ut naturlig. Escape returnerer fokus til trigger. |
| 2.4.3 Fokusrekkefølge | A | Når popover åpnes, flyttes fokus til første focusable element (hvis det finnes). Tab-rekkefølgen følger DOM-strukturen. Ved lukking med Escape returneres fokus til trigger. |
| 2.4.7 Synlig fokus | AA | Interaktive elementer i popoveren arver fokusring fra sine respektive komponenter (Button osv.). |
| 4.1.2 Navn, rolle, verdi | A | Trigger får aria-expanded og aria-haspopup="dialog". Disse oppdateres automatisk ved åpning/lukking. |
Ikke relevant (8)
| Kriterium | Nivå | Hvorfor ikke relevant |
|---|---|---|
| 1.2.1 Bare lyd og bare video (forhåndsinnspilt) | A | Komponenten inneholder ikke tidbasert media. |
| 1.2.2 Teksting (forhåndsinnspilt) | A | Komponenten inneholder ikke tidbasert media. |
| 1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt) | A | Komponenten inneholder ikke tidbasert media. |
| 1.2.4 Teksting (direkte) | AA | Komponenten inneholder ikke tidbasert media. |
| 1.2.5 Synstolking (forhåndsinnspilt) | AA | Komponenten inneholder ikke tidbasert media. |
| 2.2.1 Justerbar hastighet | A | Ingen tidsbegrensninger i komponenten. |
| 2.2.2 Pause, stopp, skjul | A | Ingen automatisk bevegelse eller blinking. |
| 2.3.1 Terskelverdi på tre glimt | A | Ingen blinkende innhold. |
Props / API
PopoverProps
| Prop | Type | Påkrevd | Standard | Beskrivelse |
|---|---|---|---|---|
placement | 'top' | 'bottom' | 'left' | 'right' | Nei | 'top' | Ønsket plassering. Flipper automatisk hvis det ikke er plass |
open | boolean | Nei | Kontrollert åpen-tilstand. Angi den for kontrollert bruk, utelat for ukontrollert | |
defaultOpen | boolean | Nei | false | Startverdi i ukontrollert modus. Ignoreres når open er satt |
onOpenChange | (open: boolean) => void | Nei | Kalles når panelet åpnes eller lukkes. I kontrollert modus setter du open som respons; i ukontrollert modus er den en observatør | |
children | ReactNode | Nei | Popover.Trigger og Popover.Content | |
className | string | Nei | Ekstra CSS-klasser på <ix-popover> | |
ref | Ref<HTMLElement> | Nei | Peker på <ix-popover>-elementet |
Popover.Trigger
| Prop | Type | Påkrevd | Beskrivelse |
|---|---|---|---|
children | ReactElement | Ja | Trigger-elementet, typisk en Button. Rendres som seg selv uten wrapper. Andre verdier enn et React-element gir en feil |
Popover.Content, Popover.Heading, Popover.Body, Popover.Actions
| Prop | Type | Påkrevd | Beskrivelse |
|---|---|---|---|
children | ReactNode | Nei | Innhold |
className | string | Nei | Ekstra CSS-klasser på <div>-elementet |
...div-attributter | Alle vanlige <div>-props |
Underkomponentene rendrer hver sin <div> med den tilsvarende BEM-klassen. Popover.Content er den web componenten finner og gir role="dialog", så den må være med.
Tilpasning med CSS
Trenger du ix-popover-stylingen på HTML du setter sammen selv, uten React-komponenten eller web componenten, kan du bruke klassene direkte på elementene dine.
Tilgjengelige klasser og selektorer
| Element | Selektor |
|---|---|
| Popover-wrapper | ix-popover eller .ix-popover |
| Innholdspanel | .ix-popover__content |
| Overskrift | .ix-popover__heading |
| Brødtekst | .ix-popover__body |
| Handlingsrad | .ix-popover__actions |
| Faktisk plassering (styrer pilen) | .ix-popover__content[data-placement="top|bottom|left|right"] |
Eksempel: bruk i egen HTML-struktur
<ix-popover placement="top">
<button class="ix-button">Åpne popover</button>
<div class="ix-popover__content">
<div class="ix-popover__heading">Overskrift</div>
<div class="ix-popover__body">Forklarende tekst.</div>
<div class="ix-popover__actions">
<button class="ix-button" data-size="sm">Bekreft</button>
</div>
</div>
</ix-popover>