W dzisiejszym artykule zaprezentuje 10 najlepszych pluginów do jQuery realizujących tololtipy.
Dlaczego tooltipy? Otóż dlatego, że są one często bardzo ważną, choć zazwyczaj niedocenianą formą przekazywania dodatkowych informacji w serwisie, dotyczących bezpośrednio elementów z którymi użytkownik wchodzi w interakcję.
Wszystkie wtyczki posiadają linki do tutoriali i demonstracji, które mam nadzieję pomogą wam podczas realizacji przyszłych projektów, zwiększając tym samym usability waszych serwisów.
1. Tooltip with jQuery Awesomeness
Świetny przykład jak w prosty sposób zbudować tooltip wykorzystując dobrodziejstwa jQuery. Tooltip pojawia się na zdarzenie hover elementu. Dodatkowo z poziomu tooltipa dysponujemy wybranymi informacjami dot. elementu do którego tooltip jest podczepiony.
2. jQuery Popup Bubble
Bardzo przejrzysty i naprawdę prosty tooltip. Nie można co prawda nazwać tego pluginem, lecz raczej jest to kawałek kodu ilustrujący w jaki sposób stworzyć własną prosta podpowiedź. Końcowy efekt naprawdę przejrzysty i profesjonalnie wyglądający.
3. qTip jQuery Plugin
Bardzo zaawansowany plugin do tooltipów. Posiada wbudowanych bardzo dużo opcji, takich jak: predefiniowane style wyglądu, zdarzenia, pozycjonowanie, pobieranie za pośrednictwem AJAX-a. Idealny do większości zastosowań. Kompatybilny z praktycznie wszystkimi liczącymi się na rynku przeglądarkami, włączając IE6.
4. Coda Popup Bubbles jQuery Tooltip
Profesjonalny popup z podpiętymi zdarzeniami mouseover i mouseout, dający efekt wyskakującej bańki z informacją. Dość prosty w realizacji, a zarazem efektowny plugin.
5. TipTip jQuery Tooltip
Dużym plusem tej wtyczki do jQuery jest fakt, że wykrywa rozmiar okna przeglądarki i upewnia się, żeby tooltip nie wystawał poza obszar widoczny i nie został przycięty lub żeby nie poszerzył rozmiaru obszaru. Dodatkowo plugin wykrywa gdzie powinien się pojawić, to znaczy pod, ponad elementem czy z jego lewej czy prawej strony. Wtyczka jest bardzo lekka, ponieważ nie wymaga żadnych obrazków i waży jedynie 3,5kb.
6. Tipsy – tooltip dla jQuery stylizowany na Facebooka
Stylizowany na komponenty Facebooka plugin do tooltipów, pobierający tekst z atrybutu title elementu, z możliwością używania tagów html-owych. Dodatkowo ma możliwość personalizacji poprzez ustawienie kierunku pojawienia się podpowiedzi czy zdarzenia wywołującego wtyczkę.
7. jTip
Plugin wykorzystujący w swoim działaniu obiekt HttpXMLRequest. Wystarczy dodać do elementu klasę jTip by zacząć z nim pracę. Dodatkowo możliwa jest prosta zmiana domyślnych ustawień wtyczki. Działanie pluginu najlepiej ilustruje Demo.
8. jQuery Tooltip – jQuery Tools
Naprawdę profesjonalnie wyglądający i bardzo prosty w użyciu plugin jQuery. Jest bardzo lekki, bo waży jedynie 1,1Kb po gzipwaniu, a zarazem udostępnia naprawdę szeroką gamę możliwości, takich jak: zmiana pozycji, efektu, przezroczystości, zdarzenia, a nawet posiada wbudowane API w ramach jQuery Tools. Dodatkowo na stronie znajduje się mnóstwo przykładów gotowych rozwiązań. Idealny do zaawansowanych rozwiązań.
9. jQuery Tooltip Menu
Przykład integracji tooltipów jQuery z menu. W działaniu przypomina trochę plugin do menu lava lamp i wykorzystuje easing plugin. Dość ciekawe rozwiązanie.
10. Jak stworzyć prosty plugin tooltip wykorzystując CSS i jQuery
Na koniec bardzo przyjemny tutorial jak samemu, krok po kroku stworzyć własny plugin do jQuery realizujący tooltipy. Autor rozbił tutorial na sekcje: pobieranie współrzednych myszki, pobieranie testu atrybutu, ukrywanie atrybutu title i zaokrąglanie rogów tooltipa. Na koniec można obejrzeć działające demo.
A może znacie jeszcze jakieś inne? lepsze? A może uważacie, że używanie tooltipów w ogóle jest nie potrzebne. Zachęcam do komentowania.
4 komentarze do “10 najlepszych tooltipów wykorzystujących jQuery”
Kiedyś próbowałem bawić się w samodzielne pisanie pluginów jQuery – w myśl zasady: weź gotowiec z sieci tylko i wyłącznie jeśli potrafisz sam to napisać.
Widząc, jak szybko idzie pisanie, zrezygnowałem z niego – oszczędzając czas w przygotowaniu projektów. Jednak to tylko małe nawiązanie do ostatniego punktu – tutorialu.
Cała reszta, myślę, że może być przydatna, chociaż. Jak widzę, jTip przystosowany do formularzy, czy tak? Moim zdaniem jest wiele lepszych i potężniejszych pluginów.
Z doświadczenia wiem, że najczęściej dobrze jest wiedzieć jakie pluginy można do czego wykorzystać, bo zaoszczędza to naprawdę dużo czasu.
Jednak prawda jest taka, że są sytuacje w których najlepiej jest napisać coś od nowa by niepotrzebnie nie tracić czasu na „rozgrzebywaniu” cudzego kodu, szczególnie gdy jest on słabo skomentowany, a nam bardzo zależy by udoskonalić jakąś jego część.
Jeżeli chodzi o lepsze pluginy, to zachęcam do podzielnia się w komentarzu
Wow
super wpis, oby więcej z serii najlepszych pluginów tematycznych do jQuery.
Naprawdę jest to super ułatwienie dla mnie przy realizacji bieżących projektów
[...] wrz.02, 2010, w kategorii sztuka programowania Alchemy Code jakiś czas temu opublikowało ciekawe zestawienie bibliotek oferujących jeden z najczęściej używanych widgetów w sieci – tooltip. Polecam. [...]