Tooltip (podpowiedź) to niewielki dymek z krótkim opisem, który pojawia się po najechaniu na element lub ustawieniu na nim fokusu. Wyjaśnia znaczenie ikon, skrótów lub pól bez zaśmiecania interfejsu.
Do czego służy tooltip?
Do krótkich wyjaśnień, które nie są niezbędne do zrozumienia interfejsu, np. opis ikony albo skrót klawiszowy. Kluczowych informacji nie powinno się ukrywać w tooltipach.
Jak zaprojektować dostępny tooltip?
Musi pojawiać się także po fokusie klawiatury, nie tylko po najechaniu myszą, dać się zamknąć klawiszem Esc i nie znikać, gdy kursor przejdzie na sam dymek. Powiąż go z elementem przez aria-describedby.
Tooltip na urządzeniach dotykowych
Na telefonach nie ma najechania, więc podpowiedź trzeba wywoływać dotknięciem lub zastąpić tekstem w interfejsie. Jeśli informacja jest ważna, pokaż ją stale.
Kiedy lepiej zrezygnować z tooltipa?
Gdy treść jest niezbędna do wykonania zadania, np. wyjaśnienie wymagań hasła, lepiej wyświetlić ją na stałe pod polem. Tooltip nie powinien zawierać linków ani przycisków, bo trudno do nich dotrzeć. Tekst ma być krótki, zwykle jedno zdanie, a ikona bez podpisu powinna mieć jeszcze dostępną nazwę dla czytników ekranu.
W pracy nad produktem uwzględnia się to na kolejnych etapach, jakie obejmuje proces projektowania UX.
Zobacz w praktyce
Proces projektowania UX krok po kroku – od badań do testów 
Refaktoryzacja JavaScript – jak poprawić Interaction to Next Paint (INP) 
Testy A/B w GA4 – jak je prowadzić i mierzyć po wyłączeniu Google Optimize