Tutorial jQuery: własne Tooltip’y

Tooltip

Poziom średnio-zaawansowany

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

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.

Podsumowanie

Jak zatem widać, wystarczy kilkanaście linijek kodu, aby stworzyć coś fajnego i użytecznego. Framework jQuery bardzo oczywiście tutaj pomógł.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook0Tweet about this on TwitterShare on Google+1Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.
  • kasatch

    Dzięki za niezły kawałek kodu. 🙂

    Miałem drobne problemy z dodaniem do mojej strony, ale bo drobnych modyfikacjach udało mi się zmienić i usprawnić ten skrypt.

    Teraz obsługuje on wszystkie znaczniki a posiadające klasę tooltip. W dymku będzie wyświetlana zawartość znacznika span znajdującego się w znaczniku a.

    Na przykład:

    <a href="http://www.onet.pl" rel="nofollow">Portal onet.pl</a>
    

    CSS:

    .tooltip span {
        display: none;
    }
    

    Javascript:

    jQuery(document).ready(function() {
    	// dodajemy element, który będzie zawierał tooltip do ciała dokumentu  
    	// oraz odpowiednio go opisujemy stylami
    	$ownTooltip = $('').attr('id', 'own-tooltip')
    	.css('position','absolute')
    	.css('height', '20px') 
    	.css('border', '2px solid #aaa')
    	.css('-moz-border-radius', '4px')
    	.css('-webkit-border-radius', '4px')
    	.css('border-radius', '4px')
    	.css('background-color', '#fff')  
    	.css('color', '#000')  
    	.css('padding', '4px 4px 1px 4px')
    	.css('magin', '0px')
    	.css('display', 'none')
    	.css('z-index', '1000')
    	.appendTo('body');
    	
    	// dla elementu linka o klasie span, który będzie zawierał w sobie atrybut span
    	// zmieniamy pozycję tooltipa
    	$('a.tooltip:has(span)').live('mousemove', function(e) {
    		var dY = e.pageY + 15;  
    		var dX = e.pageX + 15;
    		$ownTooltip.css({'top': dY, 'left': dX}); 
    	});
    	
    	// wyświetlamy tooltipa
    	$('a.tooltip:has(span)').live('mouseenter', function(e) {  
    		// zatrzymujemy animację
    		$ownTooltip.stop(true, true);
    		// pobierz tekst z elementu span zawartego w elemencie a
    		$ownTooltip.html($(this).children('span').html());
    		// i pokaż tooltip z efektem fadeIn  
    		$ownTooltip.fadeIn(200);
    	})
    	
    	// ukrywamy tooltipa
    	$('a.tooltip:has(span)').live('mouseleave', function() {
    		// zatrzymanie animacji
    		$ownTooltip.stop(true, true);
    		// ukryj z efektem fadeOut  
    		$ownTooltip.fadeOut(200);
    	});
    });
    
    • Problemów z integracją być nie powinno, przykładowo strona demo działa bez problemu, być może chodziło o integrację z większą stroną, gdzie jest masa innych skryptów i być może jakiś konflikty między bibliotekami JS.

      W każdym razie dziękuję za komentarz. Pozwoliłem sobie umieścić kod w znacznikach „code” dla podświetlenia składni i lepszego formatowania.

      Pozdrawiam

  • Piotr Dziubczyński

    Żeby to zadziałało poprawnie, należy wprowadzić kilka zmian:

    // pokazujemy tooltip
    $(&quot;*[title]&quot;).each(function() {
    $(this).hover(function() {
    // pokaż tooltip pod elementem
    $(this).mousemove(function(e) {
    

    Teraz będzie to działało dla wszystkich znaczników posiadających atrybut ‚title’. Jeżeli go nie będzie, to tiptip nie zostanie wyświetlony.
    Pozdrawiam.