
Dziś polecam tutorial jQuery, który pokazuje jak stworzyć Tooltip’y, i to zaledwie w 4 prostych krokach.
Tutorial jQuery – tworzymy własne Tooltip’y
Źródła do pobrania: tutaj.
Krok 1 – projekt
Tworzymy nowy projekt (np. w Aptana) lub po prostu strukturę jak poniżej:
Krok 2 – wygląd
Tworzymy podstawowy wygląd. Zakładamy że elementem Tooltip’a będzie span.
Plik style.css:
span#own-tooltip { height: 20px; position: absolute; top: 100px; left: 100px; border: 2px solid #00f; background-color: #fff; color: #00f; padding: 4px; display: none; }
Wygląd możemy dostosować dowolnie, zmieniając CSS zaprezentowany powyżej.
Krok 3 – struktura HTML
Tworzymy strukturę HTML. W moim przypadku potrzebne były tooltip’y dla linków, więc tekst dla podpowiedzi stanowi zawartość atrybutu title elementu.
Przykładowo:
<div id="main-place"> <a href="http://javascript-html5-tutorial.pl/" title="Blog o JavaScript">Link 1</a> <a href="http://www.google.pl/" title="Google">Link 2</a> <a href="http://www.wp.pl/" title="Wirtualna Polska">Link 3</a> </div>
Krok 4 – kod JavaScript / jQuery
Oprogramowujemy wszystko w JS z użyciem jQuery.
Czynności, które trzeba wykonać to:
– dodanie elementu tooltipa do DOM
– przejście po wszystkich elementach, dla których chcemy pokazać tooltip
– ustawienie pozycji i tekstu tooltipa (pobranego z title) i pokazanie go
– opcjonalnie dodać efekty wizualne.
Te operacje wykonuje następujący kod:
// plik jqt.js $(document).ready(function() { // dodajemy element do ciała dokumentu $("body").append("<span id='own-tooltip'></span>"); // dla elementu linka, posiadającego atrybut title // pokazujemy tooltip $("a[title]").each(function() { $(this).hover(function(e) { // pokaż tooltip pod elementem $().mousemove(function(e) { var dY = e.pageY + 4; var dX = e.pageX + 4; $("#own-tooltip").css({'top': dY, 'left': dX}); }); $("#own-tooltip").stop(true, true); // pobierz tekst z atrybutu title i ustaw go jako // tekst tooltipa $("#own-tooltip") .html($(this).attr('title')) // i pokaż tooltip z efektem fadeIn .fadeIn(100); $(this).removeAttr('title'); }, function() { $("#own-tooltip").stop(true, true); // ukryj z efektem fadeOut $("#own-tooltip").fadeOut(100); // wyczyść $(this).attr('title', $("#own-tooltip").html()); }); }); });
To wszystko. Efekt końcowy można zobaczyć tutaj.
Źródła do pobrania: tutaj.
Podsumowanie
Jak zatem widać, wystarczy kilkanaście linijek kodu, aby stworzyć coś fajnego i użytecznego. Framework jQuery bardzo oczywiście tutaj pomógł.