Gå til sidens indhold

Komponenter

Tooltip og popover

Tooltip (Placer musen over ikonet)

En tooltip kommer frem, når musen er over det element det er sat på, fx et spørgsmålstegn, og forsvinder igen når musen fjernes.

Popover (tryk på ikonet)

En popover kommer frem, når man klikker på elementet det er sat på og forsvinder ikke før der atter klikkes på elementet eller et andet sted.

Anvendes til

Brug tooltip til præcisering af specifikke elementer i brugergrænsefladen.

Brug popover til at knytte relaterede informationer, der uddyber/forklarer et element eller en funktion i brugergrænsefladen.

Anvendes ikke til

Anvendes ikke til informationer der er essentielle for at brugeren kan gennemføre løsningen, hvis indholdet er vigtigt for brugerens succes, så placer indholdet på siden som brød- eller hjælpetekst.

Vejledning

Gør indholdet i tooltips og popovers så kort og koncist som muligt.

Vær konsistent i brugen af tooltips og popovers, så brugeren ikke skal gætte sig til om der er tooltips/popovers eller ej.

Gør det let at se, hvilket element tooltip/popover hører til.

Brug altid tooltips til funktionsikoner (klikbare ikoner) uden label.

Sørg for at tooltips og popovers er tydelige at se og læse.

Placer tooltips og popovers så de ikke skygger for det indhold på siden som de relaterer til. Placeres de forkert kan brugeren blive nødt til at lukke og åbne tooltip/popover igen for at forstå sammenhængen.

Sættes der tooltip/popover på et ord i en tekst, markeres ordet med en stiplet linje under. Brug det i begrænset omfang, da det let virker forstyrrende.

Links

Placering af tooltip

Tippy.js

Vi leverer et tema til tredjeparts biblioteket Tippy.js, som man kan gøre brug af, hvis man har behov for flere værktøjer i forbindelse med tooltip.

Læs mere om brug af Tippy.js med FDS i kode afsnittet.