tooltip zasłaniający treść

Tooltip zasłaniający treść to błąd interfejsu utrudniający odczytanie informacji pod dymkiem podpowiedzi.

Jak tooltip może zasłonić właściwą informację

Tooltip, nazywany także dymkiem podpowiedzi, jest niewielkim elementem interfejsu wyświetlanym po najechaniu wskaźnikiem na ikonę, przycisk, skrót albo fragment oznaczony atrybutem podpowiedzi. Jego zadaniem jest objaśnienie funkcji elementu bez zajmowania stałego miejsca w układzie strony lub aplikacji. Błąd pojawia się wtedy, gdy dymek zostaje umieszczony nad treścią, która jest potrzebna do wykonania bieżącego zadania. Użytkownik może wtedy nie odczytać tekstu, wartości pola, komunikatu walidacyjnego, nazwy pliku albo fragmentu dokumentu.

Problem wynika zwykle z nieprawidłowego wyznaczenia położenia i rozmiaru tooltipa. Interfejs może przyjąć, że wolna przestrzeń znajduje się nad elementem, mimo że w tym miejscu jest nagłówek lub akapit. W innych przypadkach dymek jest renderowany jako element o wysokim priorytecie warstwy, na przykład z większą wartością właściwości CSS z-index, przez co przykrywa sąsiednie komponenty. Sam fakt, że tooltip jest widoczny, nie oznacza więc poprawnego działania interfejsu; musi on jeszcze pozostawiać dostęp do informacji znajdujących się pod spodem.

Położenie, warstwy i czas wyświetlania dymka

Podczas analizy należy sprawdzić, czy tooltip jest pozycjonowany względem właściwego kontenera. W CSS element z position: absolute odnosi swoje położenie do najbliższego przodka ustanawiającego kontekst pozycjonowania, często oznaczonego przez position: relative. Jeżeli takiego kontenera nie ma albo jego obszar jest nieprawidłowo ograniczony, dymek może pojawić się w innym miejscu niż przewidziano. Znaczenie mają także właściwości overflow, transform i position, ponieważ mogą tworzyć osobne konteksty rysowania lub ucinać część elementu.

Ważna jest również logika wyboru strony, po której tooltip ma się pojawić. Komponenty tego typu często próbują wyświetlić dymek nad elementem, a gdy brakuje miejsca, przenoszą go pod element albo na jego bok. Jeżeli algorytm nie uwzględnia szerokości okna, wysokości przewijanej części strony lub położenia stałego panelu, dymek pozostaje na treści. Należy zweryfikować zachowanie przy różnych rozmiarach okna, przy powiększeniu strony oraz po przewinięciu dokumentu. Tooltip nie powinien też pozostawać widoczny po opuszczeniu elementu, zamknięciu dialogu ani zmianie aktywnego pola.

Wpływ obsługi klawiatury i ekranów dotykowych

Tooltip może pojawiać się nie tylko po najechaniu myszą, lecz także po ustawieniu fokusu klawiaturą. Jeżeli użytkownik przechodzi między kontrolkami klawiszem Tab, dymek powinien być powiązany z aktualnie aktywnym elementem i nie może zasłaniać komunikatu, który użytkownik ma właśnie przeczytać. W interfejsie opartym na HTML warto sprawdzić, czy element wywołujący podpowiedź jest osiągalny z klawiatury, czy fokus jest widoczny oraz czy treść tooltipa ma poprawną relację z kontrolką, na przykład przez mechanizm aria-describedby. Sama etykieta wizualna nie zastępuje semantycznego opisu dla technologii asystujących.

Na ekranie dotykowym nie występuje klasyczne najechanie wskaźnikiem, dlatego podpowiedź może zostać wywołana dotknięciem albo dłuższym przytrzymaniem. Taki sposób obsługi łatwo prowadzi do pozostawienia dymka nad tekstem, ponieważ nie ma zdarzenia odpowiadającego szybkiemu opuszczeniu obszaru kursora. Interfejs powinien zapewnić jednoznaczny sposób zamknięcia podpowiedzi, nie blokować przycisków znajdujących się pod nią i prawidłowo reagować na zmianę orientacji urządzenia. Test powinien obejmować klawiaturę, mysz oraz ekran dotykowy, ponieważ błąd widoczny tylko w jednym trybie nadal może uniemożliwiać odczytanie treści.

Sprawdzenie błędu i naprawa na komputerze użytkownika

W pierwszej kolejności warto odtworzyć problem w tej samej przeglądarce i przy podobnym powiększeniu strony, a następnie sprawdzić go w innej przeglądarce oraz w oknie prywatnym. Narzędzia deweloperskie pozwalają obejrzeć wymiary tooltipa, jego pozycję, wartość z-index, reguły overflow i aktywne zdarzenia interfejsu. Pomocne jest także tymczasowe wyłączenie stylów odpowiedzialnych za pozycjonowanie, aby ustalić, czy przyczyną jest CSS, błędne obliczenie współrzędnych, czy opóźnione usuwanie elementu przez JavaScript. Jeżeli dymek zasłania treść tylko po przewinięciu, trzeba dodatkowo sprawdzić aktualizację pozycji podczas zdarzeń przewijania i zmiany rozmiaru okna.

Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC i ich podzespołów, a w ramach diagnostyki może również sprawdzić problemy z wyświetlaniem stron, aplikacjami oraz działaniem przeglądarek. Przy zgłoszeniu warto podać adres strony lub nazwę programu, używaną przeglądarkę, powiększenie interfejsu, sposób wywołania tooltipa oraz nagranie lub zrzut ekranu. Takie dane ułatwiają odróżnienie błędu aplikacji od problemu z lokalnym układem strony, dodatkiem do przeglądarki albo nieprawidłowym skalowaniem obrazu. Naprawa powinna polegać na zmianie reguł pozycjonowania lub logiki komponentu, a nie na ukrywaniu całej treści użytkownika.