Przy okazji jednego z realizowanych ostatnio projektów, potrzebowałem wprowadzić tooltipy dla pól formularzy. Po przeszukaniu kilku dostępnych mechanizmów, doszedłem do wniosku, że są one zbyt kompleksowe i wprowadzają niepotrzebny nadmiar kodu, wiec postanowiłem samemu napisać naprawdę prosty mechanizm wyświetlający tooltipy przy linkach (oczywiście wykorzystując do tego celu JQuery).

Podstawowe funkcje

Wraz z kolejnymi upływającymi minutami pisania pluginu, przychodziły mi do głowy kolejne możliwe rozwiązania, czego wynikiem są dwie podstawowe funkcje pluginu:

• wyświetlanie tooltipu po najechaniu na link
• wyświetlanie podglądu zdjęcia po najechaniu na jego miniaturkę

Dodatkowo pozycja tooltipu zmienia się wraz ze zmianą pozycji kursora.

Zobacz DEMO

Zasada działania

Samo działanie skryptu różni się w zależności od faktu, czy wybrany jest tryb podglądu, czy tryb tooltipu, jednakże sposób aktywowania pluginu w obu przypadkach jest jednakowy (wystarczy linkowi nadać klasę PreviewTooltip).

W przypadku, gdy wykorzystujemy tooltip tekstowy, po najechaniu na link wyświetlany jest element, którego nazwa klasy została podana w atrybucie title linku.

W drugim przypadku do body dodawany jest element stanowiący podgląd zdjęcia. Sam adres zdjęcia pobierany jest z atrybutu src znacznika img zawartego w linku. Element podobnie jak w pierwszym przypadku pokazywany jest po najechaniu kursorem na link, jednakże w tym przypadku dodatkowy element jest usuwaniu po wyjechaniu kursora poza obszar linku, czym różni się od poprzedniego przypadku, gdzie element był ukrywany poprzez atrybut css „display:none;„.

W dalszej części artykułu znajdują się przykłady prezentujące możliwości pluginu.

Przykład 1: Tooltip testowy

Podstawowy przykład obrazujący prosty tooltip tekstowy. Plugin osadzny jest poprzez nadanie klasy o nazwie PreviewTooltip do linku, natomiast nazwa klasy elementu, który ma zostać wykorzystany do zbudowania podpowiedzi znajduje się w znaczniku title.

Element wykorzystany do zbudowania podpowiedzi:

Działające przykłady:

Przykład 1

Przykład 2: Tooltip testowy z zagnieżdżoną grafiką

Oczywiście, skoro jest to element DIV, możemy pokusić się o trochę bardziej wyrafinowane jego zastosowanie. Elementy możemy
dowolnie budować, stosować grafikę oraz szablony stylów.

Działające przykłady:

Przykład 2

Przykład 3: Podgląd zdjęcia

Sam podgląd zdjęcia wykonywany jest w podobny sposób, z tym wyjątkiem, że nie umieszcza się już w dokumencie dodatkowego elementu, gdyż jest on dodawany automatycznie. Aby wykorzystać plugin do podglądu, należy nadać w linku atrybut title=”toolImgPrev”. Nazwa ta sygnalizuje, że plugin będzie działał w trybie podglądu i zacznie przeszukiwać link w poszukiwaniu elementu img. Ściezka pliku wykorzystanego do podglądu pobierana jest z atrybutu src, natomiast sam link może prowadzić do dowolnej lokacji.

Dodatkowo możliwe jest dodanie opisu do podglądu, poprzez zamieszczenie w znaczniku img atrybutu title, którego treść zostanie wyświetlona pod zdjęciem w podglądzie.

Działające przykłady:

Przykład 3

Podsumowanie

Jak widać wykorzystanie pluginu jest naprawdę proste, a zastosowanie mechanizmu wyświetlania konkretnego elementu stwarza praktycznie nieograniczone możliwości dopasowania wyglądu tooltipu do potrzeb. Dodatkowo w samym skryptcie istnieje możliwość podania współrzędnych przesunięcia względem kursowa, w jakiej odległości ma wyświetlać się podpowiedź.

Zapisz się na RSS by dowiadywać się o nowościach w serwisie!