Tooltip: uitleg die pas verschijnt als je hem zoekt
Bij een formulier staat een veld met de naam KvK-nummer en een klein vraagtekentje ernaast. Ga je er met je muis overheen, dan verschijnt de uitleg. Op een computer werkt dat prima. Op een telefoon gebeurt er niets, want daar is geen muis.
Dat is de kern van dit onderwerp. Het is een handig hulpmiddel dat op de helft van de toestellen niet bestaat.
Daarom gebruik ik het alleen voor informatie die niemand echt nodig heeft. Alles wat wel nodig is, zet ik gewoon in beeld.
Dat klinkt streng en het scheelt een hoop klachten die je nooit te horen krijgt.
Een klein tekstballonnetje bij iets wat uitleg nodig heeft.
Wat is een tooltip?
Een tooltip is een klein tekstballon dat verschijnt zodra je muis erboven houdt. Meestal bij een icoon, een afkorting of een invulveld.
Hij verdwijnt weer zodra je wegbeweegt. Je hoeft dus niets te sluiten.
Waar je hem tegenkomt
Bij vraagtekentjes in formulieren, bij pictogrammen zonder tekst en bij afkortingen in een tabel.
Ook bij een knop met alleen een icoon. Al is een zichtbaar label daar beter, zie call-to-action.
Wanneer hij helpt
Drie goede toepassingen
Uitleg van een vakterm die de meesten wel kennen.
Een voorbeeld van de opmaak van een veld.
De volledige naam bij een afkorting.
Die eerste is de belangrijkste voorwaarde. Bij het uitleg bij een veld moet je bezoeker het formulier ook zonder die uitleg kunnen invullen.
Wanneer je hem niet gebruikt
Bij informatie die nodig is om een keuze te maken. Prijzen, voorwaarden, verplichte gegevens.
Verstop dat nooit achter een handeling. Wat ertoe doet, hoort gewoon zichtbaar te zijn.
Op een telefoon
Daar is geen muisaanwijzer, dus er is niets om overheen te gaan. Sommige oplossingen tonen hem bij een tik, andere doen helemaal niets.
Bij het op mobiel kan een tik bovendien verward worden met het openen van je toetsenbord. Meer daarover lees je bij mobile first.
Wat ik in plaats daarvan doe
Ik zet de uitleg als kleine grijze tekst onder het veld. Altijd zichtbaar, op elk toestel, zonder handeling.
Dat kost twee regels ruimte en het werkt overal. Dat is de eenvoudigste oplossing die er is.
De toegankelijkheidskant
Voorleessoftware pikt zo’n ballonnetje niet altijd op. Wie met een toetsenbord werkt, komt er soms helemaal niet bij.
Bij het toegankelijkheid is dat een echt probleem. De uitleg bestaat dan wel maar is voor een deel van je bezoekers onbereikbaar.
Als je hem toch gebruikt
Zorg dat hij ook met de tabtoets verschijnt en niet alleen met de muis. Laat hem staan zolang de focus erop staat.
En gebruik nooit alleen het standaard titelveld van een afbeelding. Meer daarover lees je bij accessibility.
Hoe lang hij mag zijn
Een zin, hooguit twee. Meer past er niet in zonder dat het rommelig wordt.
Heb je meer tekst nodig, dan is het geen ballonnetje meer. Dan hoort het in de pagina zelf.
Het verschil met een popover
Een popover is groter, blijft staan tot je hem sluit en kan links bevatten. Een tooltip verdwijnt vanzelf.
Zet er dus nooit een link of een knop in. Die kun je namelijk niet aanklikken voordat hij weg is, zie navigatie.
De grijze regel onder je veld
Dat is de eenvoudigste oplossing die er is. Altijd zichtbaar, op elk toestel, zonder handeling.
Het kost je twee regels ruimte en je hoeft er niets voor te bouwen. Meer daarover lees je bij frontend.
Waarom het per browser verschilt
Sommige oplossingen tonen hem bij een tik, andere doen helemaal niets. Je kunt er dus niet van uitgaan dat het werkt.
Test het op een echt toestel voordat je erop bouwt. Dat geldt zeker bij een formulier dat aanvragen moet opleveren.
Nooit alleen het titelveld
Het standaard titelveld van een afbeelding wordt door lang niet elke browser getoond. Voorleessoftware slaat het vaak over.
Gebruik het dus niet als enige plek voor uitleg. Zeker niet bij informatie die iemand nodig heeft.
Meer vragen over Tooltip
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een tooltip?
Wanneer gebruik je een tooltip?
Werken tooltips op mobiel?
Zijn tooltips toegankelijk?
Wat is het verschil tussen een tooltip en een popover?
Hoe lang mag een tooltip zijn?
Wat is een tooltip?
Voor uitleg die niemand echt nodig heeft. Dat is de belangrijkste voorwaarde.
Drie goede toepassingen: uitleg van een vakterm die de meesten wel kennen, een voorbeeld van de opmaak van een veld, en de volledige naam bij een afkorting.
Je bezoeker moet het formulier ook zonder die uitleg kunnen invullen. Kan dat niet, dan hoort de tekst er gewoon te staan.
Gebruik hem nooit voor informatie die nodig is om een keuze te maken. Prijzen, voorwaarden, verplichte gegevens.
Verstop dat niet achter een handeling. Wat ertoe doet, hoort zichtbaar te zijn, ook voor iemand die haast heeft.
Toets het zo: kan iemand het formulier invullen zonder de uitleg te openen? Zo niet, dan hoort de tekst er gewoon te staan.
Zet er nooit prijzen, voorwaarden of verplichte gegevens in. Dat verstopt precies wat iemand nodig heeft. Houd de tekst kort: een zin, hooguit twee. Meer past er niet in zonder dat het rommelig wordt.
Wanneer gebruik je een tooltip?
Een tooltip is een klein tekstballonnetje dat verschijnt zodra je je muis boven een element houdt. Meestal bij een icoon, een afkorting of een invulveld.
Hij verdwijnt weer zodra je wegbeweegt. Je hoeft dus niets te sluiten.
Je komt hem tegen bij vraagtekentjes in formulieren, bij pictogrammen zonder tekst en bij afkortingen in een tabel.
Ook bij een knop met alleen een icoon, al is een zichtbaar label daar beter.
De kern van dit onderwerp: het is een handig hulpmiddel dat op de helft van de toestellen niet bestaat. Op een telefoon is er namelijk geen muis om overheen te gaan.
Ga ervan uit dat de helft van je bezoekers hem niet ziet. Op een telefoon is er geen muis.
Gebruik hem dus alleen voor uitleg die niemand echt nodig heeft. Alles wat wel nodig is, zet je in beeld. Test dat zelf een keer op je telefoon bij je eigen formulier. Dan zie je meteen wat er wel en niet verschijnt.
Werken tooltips op mobiel?
Nauwelijks. Er is geen muisaanwijzer, dus er is niets om overheen te gaan.
Sommige oplossingen tonen hem bij een tik, andere doen helemaal niets. Dat verschilt per site en per browser.
Een tik kan bovendien verward worden met het openen van je toetsenbord. Dan gebeuren er twee dingen tegelijk.
Ik zet de uitleg daarom als kleine grijze tekst onder het veld. Altijd zichtbaar, op elk toestel, zonder handeling.
Dat kost twee regels ruimte en het werkt overal. Het is de eenvoudigste oplossing die er is, en je hoeft er niets voor te bouwen.
Zet de uitleg als kleine grijze tekst onder het veld. Altijd zichtbaar en zonder handeling.
Dat kost je twee regels ruimte en werkt op elk toestel. Je hoeft er bovendien niets voor te bouwen. Dat is de eenvoudigste oplossing die er is. Je bezoeker hoeft er niets voor te doen en het werkt in elke browser. Ook op oudere toestellen werkt dit gewoon.
Zijn tooltips toegankelijk?
Uit zichzelf niet. Voorleessoftware pikt zo’n ballonnetje niet altijd op.
Wie met een toetsenbord werkt, komt er soms helemaal niet bij. De uitleg bestaat dan wel maar is onbereikbaar.
Gebruik je hem toch, zorg dan dat hij ook met de tabtoets verschijnt en niet alleen met de muis.
Laat hem staan zolang de focus erop staat, zodat iemand de tijd heeft om te lezen.
En gebruik nooit alleen het standaard titelveld van een afbeelding als uitleg. Dat wordt door lang niet elke browser en elk hulpmiddel getoond.
Zorg dat hij ook met de tabtoets verschijnt en niet alleen met de muis.
Laat hem staan zolang de focus erop staat. Anders is hij weg voordat iemand hem heeft kunnen lezen. Gebruik nooit alleen het standaard titelveld van een afbeelding. Dat wordt lang niet overal getoond, en voorleessoftware slaat het vaak over. Anders bestaat de uitleg wel maar is hij voor een deel van je bezoekers onbereikbaar.
Wat is het verschil tussen een tooltip en een popover?
Een popover is groter, blijft staan tot je hem sluit en kan links bevatten. Een tooltip verdwijnt vanzelf.
Dat verschil bepaalt waar je ze voor gebruikt. In een tooltip zet je nooit een link of een knop.
Die kun je namelijk niet aanklikken voordat hij weg is. Je muis verlaat het element en het ballonnetje verdwijnt.
Een tooltip mag daarnaast maar een zin zijn, hooguit twee. Meer past er niet in zonder dat het rommelig wordt.
Heb je meer tekst nodig, dan is het geen ballonnetje meer. Dan hoort het in de pagina zelf of in een popover die blijft staan.
Zet nooit een link of een knop in een tooltip. Je muis verlaat het element en het ballonnetje verdwijnt.
Heb je meer dan twee zinnen nodig, gebruik dan geen tooltip. Dan hoort de tekst in de pagina zelf. Een popover blijft staan tot je hem sluit en kan wel links bevatten. Kies die dus zodra er iets aanklikbaars in moet.
Staan er op je site vraagtekentjes en pictogrammen waarvan je niet weet of ze op mobiel werken? Stuur me de link via het formulier hieronder. Ik controleer of de uitleg overal bereikbaar is en wat er beter kan. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Tekstballon, hulpballon, hover-uitleg
