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() / 2Teraz 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:
Publikowanie komentarza