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

, Czas czytania: 3:00 min. , Komentarz(y):7

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?

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:

moduł tippy

Przykładowy konstruktor tworzący indywidualne tippy:

  • html:
tippy html
  • js:
tippy js indywidualne tippy js

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

modyfikacja tooltipu zmodyfikowany tooltip

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.

animowany tooltip

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:
tooltip js
  • css:
tooltip css

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

tooltip text

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.

TAGI:

Zostaw komentarz do artykułu: Testujemy bibliotekę do tooltipów na przykładzie tippy.js

7 Komentarz

  1. Michał

    Tooltipy są fajną rzeczą, najczęściej spotykałem je w momencie kiedy najechałem na jakiś skrót. Jest to bardzo wygodne, bo nie znając za bardzo tematu po najechaniu na takowy skrót od razu wiemy o co chodzi i nie musimy szukać informacji w google.

  2. Ziomeczek

    Kiedyś sam używałem Tooltipów jednak dopiero po przeczytaniu tego artykułu dowiedziałem się, że jest możliwość dodawania do nich animacji 😀

  3. Patrycja

    Mi osobiście jeśli chodzi o tooltipy to strasznie nie podobają się animacje związane z nimi. Nawet takie łagodne wyglądają bardzo amatorsko i nigdy nie umieściłabym ich na swojej stronie.

  4. Marek

    Czy na profesjonalnej stronie też używa się tooltipów? Pytam bo nie spotkałem się jeszcze na żadnej z tym elementem graficznym.

  5. Patryk

    Wydaje mi się, że trzeba ostrożnie używać tooltipów, ponieważ ich za duża ilość nie będzie dobrze odbierana przez odwiedzających naszą stronę ludzi. Reasumując przy dużej ilości robi się straszny syf :p

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

candyweb anias

Miła, pomocna, wieczna optymistka z zacięciem programistycznym.

Potrzebujesz wsparcia IT?

To dobry czas na kontakt

Formularz kontaktowy