Tutorial jQuery: własne Tooltip'y - javascript-html5-tutorial.pl

javascript-html5-tutorial.pl

Tutorial jQuery: własne Tooltip’y

Październik 2nd, 2013

Dominik-W

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:

Tutorial jQuery – tooltip

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.