niedziela, 27 stycznia 2013

Efektowny tooltip

Tooltip to element interfejsu używany zazwyczaj do dodatkowego opisu danego elementu (np. linku).

W podstawowych wersjach HTML-a zastosowano tooltip za pomocą atrybutu title.
Jest on stosowany do wszystkich znaczników, za wyjątkiem: <base>, <head>, <html>, <meta>, <param>, <script>, <style> i <title>.

Jak zwiększyć jego efekt, poprzez dodanie kolorystyki i animacji?
Dla zaprezentowania przykładu posłuży nam niniejszy tekst:
<p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym...<a href="#" title="Przeczytaj artykuł do końca!">czytaj więcej</a></p>
Na początek stwórzmy sobie klasę stylu, która urozmaici nam wygląd tzw. chmurki:
.tooltip { 
 position: absolute;
 white-space: nowrap;
 z-index: 2;
 opacity: 0.1;
 margin-top: -18px;
 background: #000000;
 color: #ffffff;
 padding: 5px 8px;
 border-radius: 4px;
}
Myślę, że powyższe parametry nie wymagają dodatkowego komentarza.

Następnie musimy stworzyć kod JavaScript odpowiedzialny za zmodyfikowanie atrybutu:
var tip = '';

$('[title]').mouseover(function (e) {
    tip = $(this).attr('title');

    $(this).css('position', 'relative').removeAttr('title').append('<span class="tooltip">' + tip + '</div>');

    $('.tooltip').animate({
        'margin-top': '-28px'
    }, 250).css('left', $(this).width() / 2 - $('.tooltip').width() / 2).fadeIn('500').fadeTo('10', 1.0);
}).mouseout(function () {
    $('.tooltip').remove();
    $(this).attr('title', tip);
});
Na początku tworzymy zmienną var tip, w której będziemy przechowywać treść chmurki. Następnie wyszukujemy wszystkie znaczniki HTML, które zawierają atrybut title i dodajemy funkcję przy ruchu kursora (.mouseover();), w której zapisujemy treść do wcześniej utworzonej zmiennej.

Aby chmurka była umieszczana nad linkiem, należy ustawić jej pozycję na absolutną (w kodzie CSS position: absolute;), a dla danego linku pozycję relatywną: .css('position', 'relative');.<br />
O pozycjonowaniu w CSS można dowiedzieć się więcej z artykułu na BrowseHappy.

Następnie usuwamy atrybut title, w celu wyeliminowania wyświetlania dwóch chmurek (domyślnej i naszej).

Teraz musimy stworzyć element wraz z nadanymi stylami wyglądu naszej chmurki oraz dodanie jej do istniejącego linku poprzez funkcję .append(); wraz ze zmienną tip. Możemy także dodać małą animację w postaci lekkiego ruchu wraz z pojawieniem się chmurki. Posłuży nam do tego funkcje .animate(); wykorzystując margines górny ustawiony na wartość minusową. Domyślnie chmurka jest ukryta, ale przy reakcji kursora, jej margines się zmniejszy i otrzymamy efekt ruchu w pionie. Następnie ustawimy wartość w milisekundach (250), jak długo ta animacja ma się wykonywać. Aby chmurka była w centralnej cześć linka, należy obliczyć jej położenie za pomocą wyrażenia:
$(this).width() / 2 - $('.tooltip').width() / 2
Teraz dodamy efekt pojawienia się chmurki używając funkcji .fadeTo(); oraz czasu jej wykonywania w milisekundach (10) i do jakiej wartość parametru CSS opacity ma wzrosnąć (wartość 1.0 to 100% widoczności).

Cały działający przykład można obejrzeć na jsfiddle.net.

Brak komentarzy:

Prześlij komentarz