Testujemy bibliotekę do tooltipów na przykładzie tippy.js

Katarzyna Szczepańska — Tue, 07 Sep 2021 12:05:47 +0000

Zapewne wielu z Was widziało wyskakujące okienka. Po najechaniu kursorem myszy na dany element bądź kliknięciu pojawiają się czasem tzw. “chmurki”. Najczęściej używane są one na stronach internetowych, aplikacjach, a nawet w grach komputerowych. Te podpowiedzi nazywane są z języka angielskiego tooltipami. Jest to niewidoczna część graficznego interfejsu użytkownika, zawierająca schowany, krótki komentarz lub zdjęcie. W tym artykule przetestujemy dla Was jedną z wielu propozycji widniejących w Internecie, czyli bibliotekę do tooltipów na przykładzie tippy.js.

Spis treści:

Co to jest tippy.js?
Jak zacząć korzystać z biblioteki do tooltipów?
Modyfikacje (all props)
Jak stworzyć własny wygląd tooltipa?/a>

W ramach podsumowania

Co to jest tippy.js?

Tippy.js to kompletne rozwiązanie podpowiedzi, okienek popover, rozwijanych i menu dla sieci Web, obsługiwane przez Popper. Jest to ogólna abstrakcja logiki i stylizacji elementów, które wyskakują z przepływu dokumentu i unoszą się obok elementu referencyjnego, nałożonego na interfejs użytkownika. Jest to zoptymalizowany silnik posiadający możliwość odwracania, dzięki czemu zapobiega przepełnieniu. Wchodzi w interakcję z myszą, klawiaturą oraz wejściami dotykowymi. Daje możliwość nadania niestandardowego wyglądu oraz posiada dodatkowe motywy i animacje.

Jak zacząć korzystać z biblioteki do tooltipów?

Chcąc korzystać z tej biblioteki, należy zaimportować moduł tippy. Na stronie podane są dwa sposoby, a to jeden z nich:

Przykładowy konstruktor tworzący indywidualne tippy:

html:

js:

Tippy umożliwia nam również modyfikację naszych tooltipów w naprawdę prosty sposób:

Modyfikacje (all props)

Ku zaskoczeniu tippy dają o wiele więcej możliwości, niż mogłoby się nam wydawać. Poza zmianą wyglądu, pozycji, określenia opóźnienia można również urozmaicić chmurkę animacją. Propozycji od tippy.js jest wiele. Od skromnych i nieskomplikowanych, po ciekawe i przyciągające uwagę użytkownika tooltipy.

Gdyby byłoby nam mało, możemy stworzyć też własny unikalny wygląd i animację.

Jak stworzyć własny wygląd tooltipa?

Postanowiliśmy w ramach przykładu zmienić kolor naszego tooltipa w następujący sposób:

js:

css:

Tak prezentuje się komentarz po wprowadzeniu własnych modyfikacji:

Jak widać, nic skomplikowanego. Jedyne ograniczenie jakie napotkaliśmy to nasza wyobraźnia. 🙂

W ramach podsumowania

Podsumowując, tippy.js jest potężnym narzędziem dającym wiele możliwości podczas tworzenia tooltipów. Na pewno nie raz jeszcze wrócę do tej biblioteki, ponieważ w wielu przypadkach podpowiedzi okazują się niezbędne, a korzystanie z tippy.js jest niezwykle proste i przyjemne. Co więcej, możliwość własnej modyfikacji pozwala nadać naszym “chmurkom” unikalny i adekwatny do naszej strony charakter.