Łatwe tooltipy wykorzystujące 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 najecaniu na jego miniaturkę

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

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 arykułu znajdują się przykłady prezentujące możliwości pluginu.

Przykład 1: Tooltip testowy

Najedź na link by zobaczyć tooltip

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

Najedź na link by zobaczyć tooltip z obrazkiem

Najedź na link by zobaczyć kolejny tooltip z obrazkiem

Przykład 3: Podgląd zdjęcia

Dodatkowy przykład

Inny obrazek w miniaturce, a inny w powiekszeniu:

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 przeusnięcia względem kursowa, w jakiej odległości ma wyświetlać się podpowiedź.