Testujemy bibliotekę do tooltipów na przykładzie tippy.js
, Czas czytania: 3:00 min. , Komentarz(y):12
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
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:
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.
TAGI:Zostaw komentarz do artykułu: Testujemy bibliotekę do tooltipów na przykładzie tippy.js
12 Komentarz
Dodaj komentarz
Musisz się zalogować, aby móc dodać komentarz.
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.
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 😀
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.
Czy na profesjonalnej stronie też używa się tooltipów? Pytam bo nie spotkałem się jeszcze na żadnej z tym elementem graficznym.
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
Patryk masz rację!
Ja unikam tolltipów, nie potrzebny bajer ktory srednio dziala na telefonie.
Nigdy nie używałem tooltipów. Ale widzę że ładnie wyglądają animacje do nich. Sam muszę zobaczyć jak działają u siebie na stronie. 😉
Myślę, że tooltipy to miły dodatek do naszej strony. Dobrze wykonany może dać dużo jakości stronie.
Ciekawy blog, teraz już wiem czym są tippy o których wszyscy mówią i jak korzysta się z biblioteki do nich.
Jak wyłączyć tooltipy? Jak dobrać szerokość?
Interesujący poradnik. Myślę, że tippy urozmaicają stronę, jeśli nie występują w nadmiarze.