Popover

Egnet til:

• hjelpetekst ved siden overskrift eller annen tekst
• hjelpetekst i tabellceller.
• a vise støtteinformasjon om noe.

Uegnet til:

• informasjon som er essensiell for at brukerne skal forstå innholdet.
• statisk informasjon som skal forbli stående åpne, for eksempel dultevarsel.
• hjelpetekster i sortertbare tabellheader

Komponenter som ligner:

• Modal
• OpenClose

Teknisk dokumentasjon

Se Popover i Storybook for tekniske detaljer. 

Hvordan bruke komponenten  

Innbygget knapp

Innholdet i PopOver er ment til å hentes frem når brukeren trenger det; i de fleste tilfeller trykker man på en knapp med spørsmåltegn på. Dette betyr også at PopOver ikke skal vises automatisk uten at brukeren har klikket på noe, for eksempel når siden lastes, fordi skjermlesere og andre hjelpemidler må kunne fange opp når den vises eller skjules.

Unngå å dekke over

Unngå at PopOver dekker annet viktig innhold på siden – som brukeren trenger for å gjennomføre oppgaven. Bruk da prop for å styre retningen bort fra innholdet. Merk at dersom PopOver er på utkanten av siden vil den kunne overstyre retningen for å vise innholdet på skjermen.  

Mønster

Se flere eksempler i mønster for hjelpetekster.

Farger

Vi bruker fargene gul, grønn og hvit. 

• Grønn (standard) – hjelpetekster.
• Gul – tips og veiledning.
• Hvit – nøytral informasjon

Universell utforming  

• Sjekk at tastaturfokuset er tilbake på knappen som åpner Popover, når du velger lukkekrysset.
• Sjekk at lukkekrysset alltid er etter knappen som åpner Popover i rekkefølgen, uavhengig av hvordan innholdet er plassert visuelt.