Wat is het verschil tussen een tooltip en een popover?
Een tooltip verschijnt bij zweven en bevat een paar woorden. Een popover opent na een klik en mag meer inhoud bevatten, inclusief een knop of een link.
Dat verschil bepaalt waarvoor je ze gebruikt.
En hoe toegankelijk ze moeten zijn.
De tooltip
Korte uitleg, verschijnt vanzelf, verdwijnt vanzelf. Geen knoppen, geen links.
Meer daarover lees je bij wat een tooltip is.
De popover
Meer inhoud, opent na een klik en blijft staan tot je hem sluit. Daar mag wel een link in.
Meer daarover lees je bij frontend.
Waarom je geen link in een tooltip zet
Omdat hij verdwijnt zodra je je muis wegbeweegt. Je bezoeker kan er dus nooit op klikken.
Meer daarover lees je bij accessibility.
Mijn vuistregels
- Paar woorden: tooltip.
- Meer inhoud of een knop: popover.
- Popover altijd met een sluitknop.
- Allebei bereikbaar met het toetsenbord.
Die derde maakt het verschil tussen bruikbaar en irritant.
Het verwante begrip
Een modal blokkeert je hele pagina; een popover niet. Een popover hoort bij het element waar hij vandaan komt.
Meer daarover lees je bij navigatie.
Op mobiel
Daar zijn ze bijna hetzelfde, want zweven bestaat niet. Beide openen dan op een tik.
Meer daarover lees je bij mobile first.
Wat ik in de praktijk zie misgaan
Er wordt een link in gezet, en dan is hij voor een deel van je bezoekers onbereikbaar.
Dat gaat zo: er verschijnt bij het zweven een tekstje met daarin “lees meer”. Zodra je met je muis naar dat tekstje beweegt, verdwijnt het, want je verlaat het element waar je boven hing. Op een telefoon verschijnt het sowieso nooit, want daar bestaat zweven niet.
Het resultaat is een link waar niemand op kan klikken, behalve bij toeval.
De regel die ik aanhoud is daarom: alles wat verschijnt bij zweven bevat hooguit een paar woorden uitleg en nooit iets waar je iets mee moet doen. Zodra er een knop, een link of meer dan één zin in hoort, wordt het iets wat opent na een klik en blijft staan tot je het sluit.
Dat is niet ingewikkelder om te bouwen en het scheelt je de helft van de klachten.
Meer daarover lees je bij tooltip.