Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Komponenter

Tooltip

Et tooltip kommer frem, når musen er over det element tooltippet henviser til, fx et ikon, og forsvinder igen, når musen fjernes.

Retningslinjer

Anvendes til

Brug tooltip til præcisering af specifikke elementer i brugergrænsefladen. Tooltips kan enten vises ved hover over deciderede hjælpeikoner eller ved andre elementer såsom ikoner, billeder, enkelte ord i tekststykker eller til tekst, som er forkortet i brugergrænsefladen. Tooltips bør altid bruges ved ikoner, som fremstår uden tekst.

Anvendes ikke til

Tooltips 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 i stedet for.

Vejledning

Gør indholdet i tooltips så kort og koncist som muligt, da længere tekster er sværere at skimme og blokerer andet indhold på skærmen i højere grad.

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

Gør det let at se, hvilket element tooltippet hører til.

Brug altid tooltips til klikbare ikoner uden label.

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

Placer tooltips 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 igen for at forstå sammenhængen.

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

Tooltips skal aldrig gentage tekst, som allerede er at finde på siden.

Vær opmærksom på, at tooltips på klikbare elementer med anden funktion ved klik ikke bliver vist på mobile løsninger. Tooltips på andre elementer, fx deciderede hjælpeikoner eller markerede ord i tekststykker, vises på mobil ved klik.

Tooltips vises på hover med en ganske kort forsinkelse på 0,3 sekunder. Dette er for at sikre, at tooltippet kun vises, når brugeren bevidst er stoppet ved elementet og ikke blot tilfældigt har bevæget musen over det (Harley, 2015).

Datovælger do's and don'ts

Sådan (do)

Eksempel på, hvordan et tooltip eller popover kan se ud

Sådan: Brug tooltips til ekstra information, som det skønnes at kun få brugere vil behøve for at udføre opgaven (Joyce, 2019).

Ikke sådan (don't)

Eksempel på, hvordan et tooltip eller popover ikke bør se ud

Ikke sådan: Brug ikke tooltips som erstatning for hjælpetekster eller for at spare plads. Tooltips anvendes ikke til vigtige informationer eller hjælp, som de fleste brugere har brug for, eller som ikke er umiddelbart intuitive, fx ved særlige krav til formatering (Joyce, 2019).

Se komponenten i eksempelløsninger

Referencer

Varianter

Klikbart ikon med tooltip

Eksempel på klikbart ikon med tooltip

Tekst med tooltip

Eksempel på tekst med tooltip

Her er der ord med tooltip inde i en tekst

Knap med tooltip

Eksempel på primærknap med tooltip

Placering af tooltip

Eksempel på placering af tooltip