brak tooltipów lub ich błędne działanie

Brak tooltipów lub ich błędne działanie to usterka interfejsu utrudniająca dostęp do dodatkowych informacji kontekstowych.

Jak rozpoznać problem z tooltipem w interfejsie

Tooltip, nazywany także podpowiedzią kontekstową, jest niewielkim elementem interfejsu wyświetlanym po wykonaniu określonej czynności, na przykład po najechaniu wskaźnikiem na ikonę, ustawieniu fokusu klawiatury albo przytrzymaniu elementu na ekranie dotykowym. Jego zadaniem jest przekazanie krótkiej informacji bez zajmowania stałego miejsca w widoku. Usterka polegająca na braku tooltipów występuje wtedy, gdy podpowiedź nie pojawia się mimo spełnienia warunku wyświetlenia. Błędne działanie może również oznaczać pokazanie niewłaściwego tekstu, pojawianie się podpowiedzi w nieodpowiednim miejscu, natychmiastowe znikanie komunikatu albo zasłanianie go przez inne elementy.

Objawy mogą być widoczne tylko w określonej przeglądarce, rozdzielczości ekranu, wersji aplikacji lub metodzie obsługi. Tooltip może działać po najechaniu myszą, ale nie reagować na klawiaturę. Może też pojawiać się na komputerze, a pozostawać niedostępny na smartfonie i tablecie, gdzie nie występuje klasyczne zdarzenie hover. W aplikacji uruchamianej w przeglądarce problem bywa mylony z brakiem opisu funkcji, choć przyczyną jest często nieprawidłowa obsługa zdarzeń, stylów CSS albo struktury dokumentu.

Najczęstsze przyczyny po stronie kodu i stylów

Za wyświetlanie podpowiedzi odpowiada zwykle połączenie struktury HTML, skryptu JavaScript oraz reguł CSS. Element może mieć przypisany tekst, lecz skrypt nie nasłuchuje właściwego zdarzenia, używa błędnego selektora albo odwołuje się do nieistniejącego identyfikatora. Problem pojawia się także wtedy, gdy tooltip jest tworzony dynamicznie po załadowaniu strony, a obsługa zdarzeń została podłączona wyłącznie do elementów obecnych w dokumencie podczas pierwszego renderowania. W rezultacie podpowiedzi działają dla części kontrolek, ale nie dla tych dodanych później.

Istotną rolę odgrywa CSS. Tooltip może być obecny w drzewie dokumentu, ale pozostawać niewidoczny z powodu właściwości display, visibility, opacity lub nieprawidłowego warunku w selektorze. Częstym źródłem błędu jest także kontekst nakładania elementów: zbyt niski z-index powoduje przykrycie podpowiedzi przez panel, menu albo okno dialogowe. Z kolei overflow: hidden na kontenerze może obciąć tooltip wychodzący poza jego granice. Na małych ekranach nieprawidłowe obliczenie pozycji może wypchnąć komunikat poza obszar widoczny dla użytkownika.

Podpowiedź może również zniknąć przy przejściu wskaźnika z kontrolki na sam tooltip, jeżeli obszar aktywacji nie został zaprojektowany jako spójny. Inny wariant błędu występuje, gdy kilka komponentów korzysta z jednego identyfikatora lub wspólnego obiektu stanu. Wtedy otwarcie jednej podpowiedzi zamyka inną albo treść zostaje zastąpiona komunikatem należącym do sąsiedniego elementu. Diagnostyka wymaga sprawdzenia warunku otwierania, źródła tekstu, położenia w DOM oraz kolejności reguł CSS.

Dostępność, fokus i obsługa bez myszy

Tooltip nie powinien być dostępny wyłącznie po najechaniu myszą. Użytkownik korzystający z klawiatury musi móc przejść fokusem do elementu i otrzymać tę samą informację. W praktyce warto sprawdzić działanie klawiszy Tab i Shift+Tab, widoczność wskaźnika fokusu oraz zachowanie po opuszczeniu kontrolki. Jeżeli podpowiedź zawiera istotną instrukcję, nie powinna być jedynym miejscem, w którym ta informacja występuje, ponieważ komunikaty zależne od hover mogą być niedostępne dla części metod obsługi.

W relacji między kontrolką a tooltipem często wykorzystuje się atrybut aria-describedby, którego wartość wskazuje identyfikator elementu zawierającego opis. Identyfikator musi być unikalny w obrębie dokumentu, a wskazywany element powinien zawierać właściwą treść. Sam atrybut title nie zapewnia jednolitego zachowania we wszystkich przeglądarkach i urządzeniach, dlatego nie powinien zastępować pełnego mechanizmu podpowiedzi w interfejsie wymagającym przewidywalnego działania. Trzeba również zweryfikować, czy komunikat nie jest ukrywany przed technologiami asystującymi albo usuwany z dokumentu zanim zostanie odczytany.

Na ekranie dotykowym nie ma klasycznego najechania wskaźnikiem. Podpowiedź może być uruchamiana przez dotknięcie ikony, ale wtedy należy określić sposób jej zamknięcia i zapewnić, aby nie blokowała innych funkcji. Nie każda informacja nadaje się do tooltipa: dłuższe objaśnienia, ostrzeżenia lub instrukcje wymagają zwykle stałego tekstu, etykiety albo osobnego panelu. Podczas sprawdzania należy porównać działanie z myszą, klawiaturą, ekranem dotykowym i powiększonym widokiem, ponieważ błąd może ujawnić się tylko w jednej z tych sytuacji.

Przebieg diagnostyki i naprawy usterki

Diagnostykę rozpoczyna się od odtworzenia problemu w konkretnym miejscu interfejsu i zapisania warunków, w których występuje: rodzaj urządzenia wskazującego, metoda obsługi, rozmiar okna, przeglądarka oraz stan aplikacji. Następnie sprawdza się, czy element tooltipa powstaje w strukturze strony, czy otrzymuje prawidłową treść i czy zmieniają się jego klasy lub atrybuty po aktywacji. Narzędzia deweloperskie przeglądarki pozwalają przeanalizować zdarzenia, obliczone style, pozycję elementu oraz relacje między kontrolką a opisem.

Jeżeli problem dotyczy aplikacji, trzeba rozdzielić błąd danych od błędu prezentacji. Pusty tooltip może wynikać z braku wartości zwracanej przez komponent, nieprawidłowego mapowania tłumaczeń albo błędnego warunku renderowania. W takim przypadku sama zmiana z-index nie rozwiąże problemu. Gdy treść istnieje, lecz jest niewidoczna, analizuje się style, kontenery przewijania, pozycjonowanie oraz kolejność warstw. Po wprowadzeniu poprawki należy ponownie sprawdzić otwieranie i zamykanie podpowiedzi, przechodzenie fokusem, zmianę rozmiaru okna, przewijanie oraz zachowanie na ekranie dotykowym.

Warszawskie Pogotowie Komputerowe wykonuje profesjonalną diagnostykę i naprawę laptopów, komputerów PC oraz ich podzespołów, gdy nieprawidłowe działanie interfejsu wynika z problemu z oprogramowaniem, konfiguracją systemu lub stanem urządzenia. Zakres czynności ustala się po rozpoznaniu objawów, ponieważ brak tooltipów może być błędem konkretnej aplikacji, konfliktem dodatku, nieprawidłową konfiguracją albo skutkiem uszkodzenia systemu. W przypadku laptopa diagnoza jest bezpłatna wyłącznie w trybie door-to-door, z odbiorem przez kierowcę.