Tooltip w HTML to małe, tymczasowe okienko z tekstem (lub inną zawartością), które pojawia się najczęściej po najechaniu kursorem na wybrany element strony. Służy do przekazywania użytkownikowi dodatkowych informacji, podpowiedzi lub objaśnień dotyczących funkcji, treści albo celu danego elementu.
Podstawowe zastosowanie: atrybut title
Najprostszym sposobem dodania tooltipa w HTML jest użycie atrybutu title dowolnego tagu. Gdy użytkownik najedzie kursorem na taki element, wyświetli się niewielka chmurka z tekstem wpisanym w title.
Przykład 1: Tooltip przy obrazku
<img src="profil.jpg" alt="Zdjęcie profilowe" title="To jest Twoje zdjęcie profilowe">
Po najechaniu myszką na ten obrazek pojawi się opis: „To jest Twoje zdjęcie profilowe”.
Przykład 2: Tooltip przy przycisku
<button title="Kliknij, aby wysłać formularz">Wyślij</button>
Taki tooltip wyjaśnia działanie przycisku – bardzo pomocne, kiedy etykieta lub ikona nie są w pełni czytelne.
Przykład 3: Tooltip w tabeli danych
<td title="Produkt Krajowy Brutto">PKB</td>
Dzięki temu rozwiązaniu możesz rozwinąć skróty i uczynić dane bardziej zrozumiałymi bez konieczności rozbudowywania tabeli.
Rozbudowane i zaawansowane tooltipy
Atrybut title jest funkcjonalny, ale nie pozwala na zaawansowane formatowanie (np. pogrubienia, grafiki, linki). W nowoczesnych projektach często stosuje się niestandardowe tooltipy budowane przy użyciu HTML, CSS (najczęściej z użyciem pseudoelementów i pozycji absolutnej) oraz JavaScript.
Przykład – własny tooltip z HTML i CSS
<style>
.tooltip { position: relative; cursor: pointer; }
.tooltip .tooltip-text { visibility: hidden; background: #333; color: #fff; padding: 6px 10px; border-radius: 4px; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); white-space: nowrap; z-index: 10; opacity: 0; transition: opacity 0.2s; }
.tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }
</style>
<span class="tooltip">Skrót <span class="tooltip-text">Pełne rozwinięcie skrótu</span> </span>
Ten kod pozwala na bardziej atrakcyjne wizualnie i elastyczne wyświetlanie informacji pomocniczych.
Przykłady zastosowań tooltipów
- Opisy ikon – gdy przycisk zawiera tylko ikonę, tooltip objaśnia jej znaczenie;
- Wyjaśnienia skrótów – rozwinięcie i opis skrótu, np. w tabeli lub artykule naukowym;
- Podpowiedzi w formularzach – pomoc przy wypełnianiu pól formularzy, np. dodatkowe wymagania co do hasła;
- Interaktywne pomoce w e-learningu – szybkie podpowiedzi do interfejsu edukacyjnego lub fraz w materiale szkoleniowym;
- Narzędzia analityczne – pokazywanie dokładnych wartości w wykresach i dashboardach po najechaniu kursorem na słupek/wykres.
Dodatkowe informacje
- Tooltipy mogą być również dotykowo aktywowane na urządzeniach mobilnych, np. przez długie przytrzymanie palca na elemencie,
- styl i treść tooltipów można dostosować do potrzeb, np. wyświetlać tytuł, tekst, grafikę lub link, a nawet całe mini-okna informacyjne,
- nadmierne stosowanie tooltipów lub ich przesadna treść może być niepożądane – warto zadbać o czytelność i intuicyjność strony.
Podsumowanie
Tooltip jest niezwykle pomocnym i uniwersalnym narzędziem poprawiającym użyteczność stron internetowych i aplikacji. Pozwala na przekazanie dodatkowych informacji bez „zaśmiecania” interfejsu – użytkownik otrzymuje podpowiedź dokładnie wtedy, gdy jest ona potrzebna. Warto korzystać zarówno z prostych atrybutów title, jak i rozbudowanych, interaktywnych tooltipów tworzonych z użyciem HTML, CSS i JavaScript, aby dostosować ich działanie i wygląd do potrzeb projektu.
