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:
Publikowanie komentarza