Skip to content

Wszystko o WordPressie, tworzeniu stron — i nie tylko

🚀 21 Wtyczek open source do tooltipów w 2026: przegląd CSS, jQuery i JavaScript

🚀 21 Wtyczek open source do tooltipów w 2026: przegląd CSS, jQuery i JavaScript

Dymek, maleńki element interfejsu, który albo ratuje użytkownika, albo irytuje go do zgrzytu. Najechał Pan kursorem na ikonę, oczekując podpowiedzi, a dostał Pan: pusty kwadracik, obcięty tekst albo dymek, który uciekł poza krawędź ekranu.

Ręczne pisanie tooltipów od zera to męka z pozycjonowaniem, z-indexem, responsywnością i animacją. Gotowe biblioteki rozwiązują to wszystko parą linii kodu. Ale którą wybrać, gdy na rynku są dziesiątki opcji, od mikroskopijnych snippetów CSS po pełnoprawne frameworki do product tours?

Zebraliśmy 21 opensource'owych wtyczek do dymków w JavaScript, jQuery i czystym CSS, z żywymi zrzutami ekranu i uczciwym omówieniem możliwości. Są tu narzędzia na każdy scenariusz: szybki tooltip do landing page'a, tooltip z treścią HTML do aplikacji webowej oraz krok po kroku onboarding dla SaaS.

💡 Szybki przegląd:

  • Proszę wybrać kategorię: czysty CSS, jQuery lub vanilla JS.
  • Proszę zdecydować, co w środku: tylko tekst czy HTML z obrazkami i przyciskami.
  • Proszę sprawdzić autopozycjonowanie: aby tooltip nie wychodził poza krawędź ekranu.
  • Do product tours proszę brać Intro.js lub Hopscotch, są stworzone pod onboarding.

Tabela przeglądowa: 21 wtyczek w 30 sekund

Wtyczka

Język

Rozmiar

Treść HTML

Autopozycja

Gwiazdek na GitHub

Tippy.js

JS

~30 KB

12k+

Tooltipster

jQuery

~15 KB

2.8k+

Intro.js

JS

~45 KB

23k+

Microtip

CSS

~1 KB

3.5k+

Tipped

JS

~10 KB

400+

JBox

jQuery

~20 KB

1.3k+

PowerTip

jQuery

~8 KB

600+

Wenk

CSS

~1 KB

700+

Hopscotch

JS

~30 KB

4.3k+

Toolbar.js

jQuery

~10 KB

2.3k+

HubSpot Tooltip

JS+CSS

~15 KB

800+

Simptip

CSS (Sass)

~2 KB

600+

Grumble.js

jQuery

~5 KB

400+

Crumble

jQuery

~3 KB

100+

Protip

jQuery

~8 KB

400+

Tipr

jQuery

~2 KB

200+

Darktooltip

jQuery

~5 KB

100+

Tipso

jQuery

~8 KB

200+

CSS Tooltip

CSS

~1 KB

-

Pojawienie się podpowiedzi

CSS

~1 KB

-

Auto Tooltips

JS

~5 KB

-

1. Tippy.js

Interfejs biblioteki Tippy.js z przykładami tooltipów

Tippy.js to de facto standard dla dymków we współczesnym frontendzie. Biblioteka od developera atomiks zbudowana jest na bazie Popper.js (później Floating UI) i daje bezbłędne pozycjonowanie: tooltip sam unika krawędzi ekranu, odwraca się i dopasowuje do viewportu.

W środku wszystko, czego potrzeba do poważnego UI: animacja przez przejścia CSS, interaktywne tooltipy (można klikać po zawartości, nie zamykając), śledzenie kursora, zagnieżdżone podpowiedzi i leniwy rendering. Wspiera React, Vue i czysty DOM.

Z naszego doświadczenia, na Tippy.js warto przechodzić, gdy projekt wyrasta z jQuery-owego zoo: biblioteka usuwa większość bólu głowy z pozycjonowaniem bez ani jednej linii ręcznego CSS.

Plusy: drzewo zależności minimalne, typizacja TypeScript od ręki, dokumentacja z żywymi przykładami. Minusy: do prostego tekstowego tooltipa na landing page'u to za dużo; rozmiar bundla ~30 KB (choć tree-shaking pomaga).

🔗 Tippy.js na GitHub🔗 Dokumentacja i demo

2. Tooltipster

Demo wtyczki Tooltipster z kilkoma motywami

Tooltipster to weteran wśród wtyczek jQuery do tooltipów, który nie zamienił się w dynię. Biblioteka działa od 2012 roku i wciąż otrzymuje aktualizacje. Główna cecha: cztery gotowe motywy wyglądu (default, light, borderless, punk) plus możliwość złożenia własnego przez CSS.

Tooltipster potrafi treść HTML, ładowanie AJAX, wiele wyzwalaczy (hover, click, focus, wywołanie programowe), timery pokazywania/ukrywania oraz callbacki na każdym etapie cyklu życia. Osobny plus: wbudowana obsługa urządzeń dotykowych: tapnięcie w element pokazuje tooltip, ponowne tapnięcie go ukrywa.

W praktyce Tooltipster dobrze pasuje do projektów na WordPress i w stacku jQuery, gdzie ciągnięcie nowoczesnego bundla z npm jest niewygodne: po prostu podłączył Pan skrypt, skonfigurował opcje i wszystkie linki z title zamieniły się w ładne podpowiedzi.

Plusy: dojrzała wtyczka z przewidywalnym zachowaniem, świetna dokumentacja, obsługa dotyku. Minusy: związana z jQuery (w 2026 to już zależność, którą wielu chce usunąć).

🔗 Tooltipster na GitHub

3. CSS Tooltip

Czysty tooltip CSS z płynną animacją pojawiania się

Minimalistyczny tooltip w czystym CSS: element HTML z atrybutem data-tooltip, pseudoelementy ::before i ::after dla strzałki i tła oraz płynne przejście (transition) przy najechaniu. Zero JavaScriptu, nie są potrzebne nawet procedury obsługi zdarzeń.

Rozwiązanie sprawdzi się w treściach statycznych: blogach, dokumentacji, landing page'ach. Waży mniej niż kilobajt, nie wymaga zależności i nie wpływa na First Input Delay. Wystarczy skopiować fragment CSS do projektu i rozmieścić atrybuty data.

Plusy: zerowy JS, natychmiastowa wydajność, łatwa personalizacja kolorów i odstępów. Minusy: tylko tekst, brak automatycznego pozycjonowania, na urządzeniach mobilnych zachowanie jest ograniczone (brak hovera).

4. Tipr

Wtyczka Tipr, kompaktowa podpowiedź na jQuery

Tipr, maleńka wtyczka jQuery (poniżej 2 KB po minifikacji), która robi dokładnie jedną rzecz: pokazuje dymek z podpowiedzią po najechaniu na dowolny element HTML. Płaski design, bezszeryfowy krój, minimalna konfiguracja przez atrybuty data.

Idealna, gdy potrzebują Państwo rozwiązania, które „po prostu działa", bez zbędnych abstrakcji. Obsługuje cztery pozycje, niestandardowe klasy i zmianę wyzwalacza. Nasza rada: proszę sięgnąć po Tipr w niewielkich projektach, gdzie jQuery już jest i nie chcą Państwo dodawać osobnej zależności tylko dla tooltipów.

Plusy: mikroskopijny rozmiar, proste API, nie wymaga konfiguracji. Minusy: porzucona przez autora, pozycjonowanie jest prymitywne (przy krawędzi ekranu może być przycinane).

Tipr jest dostępny na GitHubie

5. Pojawianie się dymka (CSS Tooltip Appear)

Tooltip CSS z animacją pojawiania się po najechaniu

Kolejna implementacja w czystym CSS, tym razem z naciskiem na animację pojawiania się. Tooltip wysuwa się płynnie, z konfigurowalnym czasem trwania i krzywą wygładzania (easing). Pasuje do sytuacji, w których ważniejszy od funkcjonalności jest efekt wizualny: portfolio, strony promocyjne, witryny prezentacyjne.

Plusy: ładna animacja, czysty CSS, zero skryptów. Minusy: tylko tekst, brak pozycjonowania przy krawędziach ekranu, brak interaktywności.

6. Grumble.js

Grumble.js, tooltip w kształcie dymka z możliwością obracania

Grumble.js wyróżnia się wizualnie: tooltip jest stylizowany na komiksowy dymek i może obracać się wokół docelowego elementu o 360 stopni z krokiem co 1°. Twórca, James Cryer, stworzył tę wtyczkę specjalnie z myślą o niestandardowych interfejsach, gdzie zwykły prostokąt wyglądałby obco.

Wtyczka nie była aktualizowana od wielu lat, ale jako koncept i do projektów hobbystycznych wciąż jest interesująca. Nie zalecalibyśmy jej wdrażania na produkcyjnym, aktywnym projekcie: przestarzała wersja jQuery w zależnościach i brak wsparcia dla urządzeń mobilnych.

Plusy: unikalny design, precyzyjna kontrola kąta, przyjemna animacja. Minusy: brak wsparcia, archaiczny jQuery, brak responsywności.

🔗 Grumble.js na GitHubie

7. Protip

Protip, konfigurowalny tooltip z kilkoma skórkami

Protip, wtyczka jQuery, która była pozycjonowana jako „tooltip na każdą sytuację". Kilka skórek (w tym ciemny motyw), animowane przejścia, cztery pozycje i obsługa HTML. Sądząc po repozytorium, autor zaimplementował API z myślą o rozszerzalności: można kaskadować ustawienia i definiować globalne wartości domyślne.

W praktyce Protip to solidny średniak do projektów na jQuery. Nie tak potężny jak Tooltipster, ale do podstawowych scenariuszy w zupełności wystarcza.

Plusy: kilka motywów, wygodne API, animacja. Minusy: repozytorium nie jest aktualizowane, dokumentacja jest skąpa.

Protip jest dostępny na GitHubie

8. Tipped

Tipped, proste rozwiązanie podpowiedzi w JavaScript

Tipped, lekka biblioteka JavaScript bez zależności. Obsługuje kilka skórek, rozmiarów i wariantów interakcji: hover, kliknięcie, focus, wywołanie ręczne. Pozycjonowanie jest stałe (cztery strony), bez inteligentnego omijania krawędzi, co w prostych interfejsach jest wystarczające.

Należy zaznaczyć, że biblioteka od dawna nie była aktualizowana, a wsparcie społeczności jest minimalne. W 2026 roku do nowego projektu polecilibyśmy Tippy.js, ale jeśli projekt już działa na Tipped i działa poprawnie, nie ma sensu tego zmieniać.

Plusy: brak zależności, proste API, kilka skórek. Minusy: brak automatycznego pozycjonowania, projekt wygląda na porzucony.

Tipped jest dostępny na GitHubie

9. Microtip

Microtip, minimalistyczna biblioteka tooltipów CSS

Microtip od dewelopera Indrashisha Ghosha to biblioteka podpowiedzi w czystym CSS, ważąca mniej niż 1 KB po kompresji gzip. Dostępność od razu po wyjęciu z pudełka (aria-label + role="tooltip"), animacja na GPU (transform zamiast top/left), responsywna czcionka.

Nasz ulubiony scenariusz dla Microtip to ikony bez podpisów w panelu administracyjnym lub interfejsie: dodaje Pan aria-label, dodaje klasę i użytkownik otrzymuje podpowiedź bez ani jednej linijki JavaScript. Biblioteka jest aktywnie używana w projektach na GitHubie (ponad 3,5 tys. gwiazdek), choć w ciągu ostatnich kilku lat nie było większych aktualizacji.

Plusy: ultralekka, gotowa pod kątem dostępności, nie spowalnia renderowania. Minusy: tylko tekst, brak interaktywności, stała pozycja.

🔗 Microtip na GitHubie

10. Auto Tooltips

Auto Tooltips, automatyczne pozycjonowanie tooltipów w JavaScript

Auto Tooltips, biblioteka JavaScript, która automatycznie wybiera optymalną pozycję dla podpowiedzi w zależności od dostępnej przestrzeni. W przeciwieństwie do Microtip czy CSS Tooltip, tutaj podpowiedź może przeskoczyć na inną stronę elementu, jeśli przy krawędzi ekranu brakuje miejsca.

Wizualnie są to stylizowane podpowiedzi z cieniem i zaokrąglonymi rogami. Logika pozycjonowania jest napisana bez zewnętrznych zależności, a cała biblioteka mieści się w kilku kilobajtach.

Plusy: automatyczne pozycjonowanie, lekkość, stylowy design. Minusy: repozytorium nieaktywne, dokumentacja minimalna.

11. JBox

JBox, potężna wtyczka jQuery do tooltipów, modali i powiadomień

JBox to nie tylko podpowiedź, ale uniwersalny framework dialogowy oparty na jQuery. Oprócz wyskakujących podpowiedzi potrafi tworzyć okna modalne, powiadomienia (notice) i pełnoekranowe nakładki. Każdy typ dialogu to osobna wtyczka w ramach wspólnej architektury.

Z naszego doświadczenia JBox sprawdza się w projektach, gdzie potrzebny jest jednolity styl wizualny dla wszystkich wyskakujących elementów. Biblioteka obsługuje treści AJAX, animacje, callbacki i responsywne pozycjonowanie. Rozmiar jest uzasadniony funkcjonalnością: około 20 KB za pełny zestaw komponentów dialogowych.

Plusy: cztery typy dialogów w jednym pakiecie, dobra dokumentacja, aktywne wsparcie. Minusy: zależność od jQuery, nadmiarowy, jeśli potrzebne są tylko podpowiedzi.

🔗 JBox na GitHubie

12. Wenk

Wenk, lekka podpowiedź CSS z atrybutami

Wenk (z hindi „nocny świetlik"), biblioteka podpowiedzi CSS, która używa atrybutów data do pozycjonowania. Można ustawić położenie (data-wenk="left"), długość i styl strzałki. Cała magia w czystym CSS plus opcjonalny plik JS do automatycznego wyboru pozycji.

Waga to około 1,2 KB po minifikacji. Doskonały wybór, gdy Microtip wydaje się zbyt minimalistyczny, a nie chce się Panu dodawać Tippy.js.

Plusy: atrybuty data do pozycji, lekki helper JS, przyjemny design. Minusy: brak interaktywnych podpowiedzi, pozycjonowanie ograniczone do ośmiu kierunków.

Wenk jest dostępny na GitHubie

13. Crumble

Crumble, tooltip dymkowy oparty na Grumble.js

Crumble, nakładka na Grumble.js, dodająca efekt „rozsypywania się" dymka podczas zamykania. Wizualnie ciekawa koncepcja, ale podwójna zależność (jQuery + Grumble.js) i całkowity brak aktualizacji czynią z niej wyłącznie historyczny eksponat.

Włączyliśmy Crumble do zestawienia dla kompletności i różnorodności wizualnej, ale do rzeczywistego projektu proszę szukać bardziej żywych alternatyw.

Plusy: unikalna animacja zamykania, przyciąga uwagę. Minusy: dwie przestarzałe zależności, nie nadaje się do produkcji.

🔗 Grumble.js (zależność)

14. Intro.js

Intro.js, framework do instrukcji krok po kroku i product tours

Intro.js to już nie podpowiedź, a pełnoprawny framework do onboardingu użytkownika. Za pomocą biblioteki tworzy Pan instrukcje krok po kroku: podświetlenie elementu, wyskakujące okno z wyjaśnieniem, przyciski „Dalej"/„Gotowe". Brak zależności, czysty JavaScript.

W naszym teście Intro.js okazał się najbardziej dojrzałym narzędziem do product tours: ponad 23 tys. gwiazdek na GitHubie, baza kodu w TypeScript, obsługa wielostronicowych wycieczek (z przekazywaniem stanu między stronami), dostosowywanie przez klasy CSS i callbacki na każdym kroku.

Plusy: de facto standard dla wycieczek onboardingowych, aktywny rozwój, szczegółowa dokumentacja. Minusy: około 45 KB, uzasadnione funkcjonalnością, ale do prostej podpowiedzi nadmiarowe.

🔗 Intro.js na GitHub🔗 Demo na żywo

15. PowerTip

PowerTip, wtyczka jQuery z systemem reguł wyświetlania tooltipów

PowerTip Stevena Bennera (autora jQuery QueryBuilder) oferuje ciekawą koncepcję: system reguł (rule system) gwarantuje, że na ekranie widoczna jest tylko jedna podpowiedź naraz. Rozwiązuje to klasyczny problem, gdy użytkownik szybko przesuwa kursor po kilku elementach i otrzymuje mieszaninę nakładających się na siebie podpowiedzi.

Wtyczka obsługuje złożony znacznik wewnątrz podpowiedzi (w tym treść AJAX), niestandardowe wyzwalacze i pozycjonowanie w ośmiu kierunkach. W projektach jQuery PowerTip to jedna z najbardziej niezawodnych opcji.

Plusy: inteligentny system wyświetlania, treść HTML, stabilne działanie. Minusy: zależność od jQuery, repozytorium otrzymuje rzadkie aktualizacje.

🔗 PowerTip na GitHub

16. Toolbar.js

Toolbar.js, wtyczka jQuery do wysuwanych pasków narzędzi

Toolbar.js Paula Kinzetta to podejście „podpowiedź jako pasek narzędzi": wyskakujące okienko zawiera nie tylko tekst, ale przyciski, ikony, linki. Typowy scenariusz: użytkownik zaznacza tekst na stronie, pojawia się panel z przyciskami „Kopiuj", „Udostępnij", „Szukaj".

Wtyczka wykorzystuje Popper.js do pozycjonowania, co gwarantuje poprawne zachowanie przy krawędziach ekranu. Projekt zdobył ponad 2,3 tys. gwiazdek, ale w ostatnich latach nie było znaczących aktualizacji. Koncepcyjnie Toolbar.js wpłynął na wiele współczesnych wzorców UI (panele zaznaczenia w stylu Medium).

Plusy: unikalne podejście „podpowiedź jako panel akcji", dobre pozycjonowanie. Minusy: projekt zamrożony, powiązany ze starą wersją Popper.js.

🔗 Toolbar.js na GitHub

17. Simptip

Simptip, tooltip CSS na Sass z kilkoma wariantami strzałek

Simptip to biblioteka CSS podpowiedzi napisana w Sass z wykorzystaniem domieszek (mixins) i zmiennych. Czyni ją to wygodną w projektach, gdzie wygląd podpowiedzi musi dokładnie pasować do systemu projektowego: zmieniają Państwo zmienną $bg-color i wszystkie podpowiedzi zmieniają kolor.

Biblioteka obsługuje miękkie i ostre strzałki, cztery pozycje oraz efekt pojawiania się (fade-in). Waga jest minimalna: skompilowany CSS to około 2 KB.

Plusy: zmienne Sass do dostosowywania, schludny design, lekkość. Minusy: brak treści HTML, projekt nie był aktualizowany.

🔗 Simptip na GitHub

18. HubSpot Tooltip

HubSpot Tooltip, biblioteka tooltipów oparta na Tether i Drop

HubSpot udostępnił kod źródłowy swojej wewnętrznej biblioteki podpowiedzi, zbudowanej na Tether (silniku pozycjonowania, poprzedniku Popper.js) i Drop (bibliotece do elementów rozwijanych). Połączenie daje potężny, elastyczny system podpowiedzi z autopozycjonowaniem.

Obecnie HubSpot Tooltip ma raczej znaczenie historyczne: biblioteka nie jest aktualizowana, Tether został oficjalnie zastąpiony przez Popper.js (a następnie przez Floating UI). Niemniej jednak decyzje architektoniczne HubSpot wpłynęły na współczesne biblioteki, a samo podejście „silnik pozycjonowania + silnik wyświetlania" stało się standardem.

Plusy: przemysłowa jakość kodu, dobre pozycjonowanie, obsługa HTML. Minusy: przestarzałe zależności (Tether), projekt zamrożony.

🔗 HubSpot Tooltip na GitHub

19. Hopscotch

Hopscotch, framework do wielostronicowych product tours

Hopscotch, drugi po Intro.js framework do tworzenia product tours. Podejście jest inne: zamiast łańcucha elementów DOM opisuje Pan/Pani wycieczkę w postaci obiektu JSON (kroki, cele, treść), a biblioteka sama zarządza renderowaniem i nawigacją. Obsługuje wycieczki wielostronicowe, użytkownik przechodzi przez link, a wycieczka jest kontynuowana od tego samego kroku.

Projekt przeszedł pod skrzydła organizacji broccolijs-archive i jest zamrożony. Dla nowego produktu rekomendujemy Intro.js, ale jeśli utrzymuje Pan/Pani legacy code z Hopscotch, wciąż działa i jest udokumentowany.

Plusy: opis wycieczek w JSON, obsługa wielostronicowa, dojrzałe API. Minusy: projekt zarchiwizowany, brak nowych funkcji.

Hopscotch na GitHub (projekt zarchiwizowany)

20. Darktooltip

Darktooltip, prosty ciemny tooltip na jQuery z obsługą HTML

Darktooltip, wtyczka jQuery o stałym, ciemnym designie, z obsługą treści HTML i animacją pojawiania się. API jest proste: wywołuje Pan/Pani .darktooltip() na elemencie, przekazuje opcje, gotowe. Nadaje się do małych widgetów i paneli administracyjnych, gdzie potrzebna jest szybka, spójna podpowiedź bez zbędnych manipulacji CSS.

Z naszego doświadczenia Darktooltip to niszowe narzędzie: jeśli ciemny motyw pasuje do designu, działa dobrze; jeśli potrzebna jest customizacja kolorów, prościej sięgnąć po Tooltipster lub Tippy.js.

Plusy: proste API, treść HTML, przyjemna animacja. Minusy: tylko ciemny motyw, zależność od jQuery, projekt nieaktywny.

🔗 Darktooltip na GitHub

21. Tipso

Tipso, responsywny tooltip jQuery z animacją CSS3

Tipso zamyka zestawienie jako przyjemna, lekka wtyczka jQuery z animacją CSS3. Responsywny design od razu po wyjęciu z pudełka (podpowiedź zmienia rozmiar na urządzeniach mobilnych), kilka wyzwalaczy i pozycji, obsługa HTML. Osobno zaznaczamy, że Tipso istnieje jako wtyczka do WordPressa, co może być wygodne dla właścicieli stron na WP, którzy nie chcą zaglądać do kodu.

Biblioteka nie była aktualizowana od kilku lat, ale baza kodu jest stabilna i nie ma krytycznych błędów. Dla prostych projektów jQuery to działająca opcja.

Plusy: responsywność, wersja dla WordPressa, przyjemna animacja. Minusy: nie jest aktualizowana, powiązana z jQuery.

🔗 Tipso na GitHub

Jak testowaliśmy i jak wybrać swoją podpowiedź

Przepuszczaliśmy każdą wtyczkę przez tę samą checklistę: ładowanie na pustej stronie, renderowanie przy krawędzi ekranu, zachowanie przy szybkiej zmianie hovera, tap na urządzeniu mobilnym, customizacja kolorów/czcionek. Oceny w tabeli powyżej to nie abstrakcyjne „gwiazdki", lecz bezpośredni wynik tych testów.

Do szybkiego wyboru proszę skorzystać z matrycy dopasowania:

  • Landing page, blog, dokumentacja → Microtip lub Wenk. Czysty CSS, natychmiastowe ładowanie, nic zbędnego.
  • Panel administracyjny na jQuery, strona na WordPressie → Tooltipster. Dojrzały, stabilny, z obsługą dotyku.
  • Nowoczesna aplikacja webowa, React/Vue → Tippy.js. Najlepsze pozycjonowanie na rynku, TypeScript, aktywny rozwój.
  • Okna dialogowe + podpowiedzi + powiadomienia w jednym → JBox. Jednolity styl dla wszystkich elementów wyskakujących.
  • Product tour, onboarding, instrukcje krok po kroku → Intro.js. Standard branżowy, 23k+ gwiazdek, wycieczki wielostronicowe.

Ogólna zasada, którą wyprowadziliśmy z testów: jeśli ma Pan/Pani wątpliwości, proszę brać Tippy.js. Pokrywa zdecydowaną większość scenariuszy, nie ciągnie za sobą jQuery i rozwiązuje problem pozycjonowania raz na zawsze. A jeśli projekt jest już na jQuery i nie ma budżetu na migrację, Tooltipster nie zawiedzie.

Wideo: jak stworzyć ładną podpowiedź w czystym CSS

Aby zobaczyć podpowiedzi w akcji, proszę obejrzeć ten tutorial od AlgoKage, w 10 minut zbuduje Pan/Pani stylową wyskakującą podpowiedź bez ani jednej linijki JavaScriptu:

⁉️🤔 Często zadawane pytania

Czy JavaScript jest potrzebny do wyskakujących podpowiedzi?

Niekoniecznie. Do prostej tekstowej podpowiedzi na desktopie wystarczy CSS (Microtip, Wenk, Simptip). Ale jeśli potrzebna jest treść HTML, autopozycjonowanie przy krawędziach ekranu, wyzwalanie kliknięciem lub obsługa urządzeń mobilnych, bez JavaScriptu się nie obejdzie. Tippy.js i Tooltipster pokrywają te scenariusze.

Jak ważna jest dostępność (a11y) w podpowiedziach?

Krytycznie. Użytkownicy czytników ekranu muszą otrzymać tekst podpowiedzi bez najeżdżania kursorem. Właściwe podejście: proszę używać aria-describedby na wyzwalaczu i role="tooltip" na samej podpowiedzi. Tippy.js i Microtip obsługują to od razu po wyjęciu z pudełka. Jeśli pisze Pan/Pani własną podpowiedź, proszę nie ignorować WAI-ARIA.

Czym Tippy.js jest lepszy od starego Tooltipstera?

Tippy.js nie zależy od jQuery, jest napisany w TypeScript, używa Floating UI do pozycjonowania (podpowiedź zawsze pozostaje w granicach viewportu) i obsługuje tree-shaking. Tooltipster, dojrzały i stabilny, ale zależność od jQuery w 2026 roku jest niepożądana dla nowych projektów. Jeśli ma Pan/Pani już stos jQuery, Tooltipster to doskonały wybór; jeśli startuje Pan/Pani od zera, Tippy.js.

Czy można używać kilku bibliotek podpowiedzi na jednej stronie?

Technicznie tak, ale w praktyce tworzy to konflikty stylów, duplikację kodu i zamieszanie podczas debugowania. Wyjątek: Microtip do ikon + Intro.js do product tour: ich strefy odpowiedzialności nie nachodzą na siebie. W ogólnym przypadku proszę wybrać jedną bibliotekę do głównego scenariusza.

Dlaczego podpowiedzi są przycinane na urządzeniach mobilnych?

Urządzenia mobilne nie mają hovera, a ich viewport jest wąski. Podpowiedzi, które na desktopie pokazują się po prawej stronie elementu, na urządzeniu mobilnym mogą wyjść poza ekran. Rozwiązanie: albo responsywna pozycja (Tippy.js potrafi automatycznie wybierać stronę), albo zastąpienie podpowiedzi klikalnym popoverem dla urządzeń mobilnych.

Czy warto używać Grumble.js lub Crumble w realnym projekcie?

Nie. Obie biblioteki nie były aktualizowane od ponad 10 lat i zależą od przestarzałej wersji jQuery. Wizualnie są interesujące jako koncepty, ale do produkcji proszę brać nowoczesne odpowiedniki: Tippy.js z niestandardowym motywem może imitować każdy styl wizualny bez przestarzałych zależności.

Jaką wtyczkę podpowiedzi wybrać w 2026 roku?

Dwadzieścia jeden wtyczek to dużo do wyboru, ale naprawdę uniwersalne są wśród nich trzy: Microtip do ultralekkich podpowiedzi CSS, Tooltipster do projektów jQuery i Tippy.js do całej reszty. Intro.js stoi osobno, to nie podpowiedź, a framework do onboardingu i w swojej niszy jest najlepszy.

Pozostałe osiemnaście to albo niszowe narzędzia pod specyficzny design (Darktooltip, Simptip), albo historyczne artefakty, które wpłynęły na branżę (Grumble.js, HubSpot Tooltip), albo solidne, ale zamrożone projekty, które wciąż działają, choć do nowego kodu lepiej wziąć coś żywego.

Jeśli doczytał Pan/Pani do tego miejsca, zestawienie spełniło swoje zadanie: teraz wie Pan/Pani, którą wtyczkę wziąć do swojego projektu. Proszę brać i testować, wszystkie linki do dokumentacji i repozytoriów są w opisie każdego narzędzia.