Tooltip w HTML to niewielka „chmurka” z dodatkowymi informacjami, która pojawia się po najechaniu kursorem lub naciśnięciu na dany element strony, bez konieczności klikania. Tooltipy stosowane są w interfejsach użytkownika (GUI) jako szybka pomoc lub objaśnienie funkcji przycisków, ikon, skrótów i innych elementów, które mogą być nieoczywiste dla użytkownika.
Definicja i sposób działania tooltipów w HTML
Tooltip (zwany też infotip lub hint) to element graficzny interfejsu, który zwiększa czytelność strony oraz komfort użytkowania. Najczęściej pojawia się automatycznie przy najechaniu kursorem myszy na wybrany fragment strony (np. przycisk, obrazek, tekst), a znika po przesunięciu kursora lub odkliknięciu elementu. Na urządzeniach dotykowych tooltip wywołuje się dłuższym przytrzymaniem (long-press) lub użyciem rysika.
Podstawowa implementacja tooltipa w HTML
Najprostszym sposobem dodania tooltipa do elementu HTML jest wykorzystanie atrybutu title. Po umieszczeniu go w tagu, przeglądarka automatycznie wyświetli wpisany tekst jako podpowiedź po najechaniu kursorem.
Przykład –
<button title="Kliknij, aby wysłać formularz">Wyślij</button>
Po najechaniu kursorem na przycisk „Wyślij”, pojawi się chmurka z opisem „Kliknij, aby wysłać formularz”.
Przykłady zastosowań tooltipów
- Opis obrazka – umożliwia szybkie wyjaśnienie, co przedstawia dana grafika;
- Rozwinięcie skrótu w tabeli – pozwala na pokazanie pełnej nazwy lub roli w organizacji;
- Dodatkowy opis ikony – służy do przekazywania dodatkowych wyjaśnień dotyczących poszczególnych ikon.
<img src="profil.jpg" alt="Zdjęcie profilowe" title="To jest Twoje zdjęcie profilowe">
<td title="Product Owner">PO</td>
<span class="ikona-info" title="Więcej informacji o produkcie"></span>
Rozbudowane zastosowania
Chociaż title jest szybkim i prostym rozwiązaniem, dla bardziej zaawansowanych projektów webowych stosuje się własne tooltipy z użyciem HTML, CSS, a czasem JavaScript. Pozwala to na:
- Wyświetlanie nie tylko tekstu, ale także grafik, nagłówków, linków lub większych fragmentów treści;
- Zmianę wyglądu tooltipów zgodnie z identyfikacją wizualną strony;
- Dodanie animacji pojawiania się lub znikania tooltipów.
Przykład prostego tooltipa z własnym HTML i CSS –
<style>
.tooltip { position: relative; display: inline-block; cursor: pointer; }
.tooltip .tooltiptext {
visibility: hidden; width: 180px; background-color: #555; color: #fff;
text-align: center; border-radius: 5px; padding: 8px; position: absolute;
z-index: 1; bottom: 125%; left: 50%; margin-left: -90px; opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible; opacity: 1;
}
</style>
<div class="tooltip">
<button>?</button>
<span class="tooltiptext">Szczegółowe informacje na temat tego przycisku.</span>
</div>
Po najechaniu na przycisk „?” pojawi się chmurka z rozbudowanym, stylizowanym opisem.
Podsumowanie – kiedy warto stosować tooltipy?
- Wyjaśnianie ikon lub przycisków bez tekstowych podpisów;
- Rozwinięcia skrótów, terminów branżowych lub niezrozumiałych zwrotów;
- Dostarczanie podpowiedzi w formularzach i polach tekstowych;
- Dodawanie dodatkowych informacji bez zaśmiecania interfejsu.
Dobrze zaprojektowany tooltip poprawia dostępność i użyteczność strony. Należy jednak pamiętać, by nie przesadzać z ich ilością i zadbać o odpowiednią czytelność treści. Tooltipy to praktyczne narzędzie zarówno w prostych, jak i zaawansowanych projektach internetowych.
