Intro
Popover er et skjult panel koblet til et anker. Du styrer selv når det skal vises og brukes ofte som en popup for å fortelle brukeren om noe som har skjedd. Popoveren vil legge seg over alle andre elementer i grensesnittet.
Egnet til å:
- Å vise ekstra informasjon om elementer eller situasjoner
Vurder noe annet:
- Når funksjonaliteten kan erstattes med Tooltip
- Når det blir mye informasjon, som fungerer dårlig på mindre flater
aksel.nav.no
aksel.nav.no
Demo
Varianter
Plassering
Popover tilbyr muligheten til å plassere den top, right, bottom og left relatert til ankeret. Disse orienteringene har også muligheten til å definere start/end, eks top-end. Vi anbefaler for det meste å holde seg til de 4 førstnevnte. Popover styrer selv plassering hvis den ikke har plass i ønsket retning.
Arrow
Popover kan brukes med eller uten pil, basert på ønsket variant.
Offset
Basert på bruk, kan offset overstyre standardverdiene. Eks for en popover med søketreff under et søkefelt ønskes kanskje 0px offset basert på designet.
Padding
Selve Popover-komponenten har ingen padding, men har en utility-komponent Popover.Content som legger på 16px padding om ønsket.