Всплывающие подсказки на jQuery

Возможно, некоторые из вас были на сайте программы «Кода» и видели там вот такой интересный эффект:

Так вот, в этом уроке мы посмотрим, как сделать такую же всплывающую подсказку средствами jQuery.

Для начала, давайте посмотрим, что должно получиться в итоге. Понравилось? Тогда идем дальше.

HTML разметка

Код пузыря и объекта, при наведении курсора на который будет появляться подсказка.

<div class="bubbleInfo">
    <div id="download" class="trigger">Наведи на меня курсор</div>
    <table style="opacity: 0; top: -50px; left: -33px; display: none;" id="dpop" class="popup">
        <tbody><tr>
            <td id="topleft" class="corner"></td>
            <td class="top"></td>
            <td id="topright" class="corner"></td>
        </tr>

        <tr>
            <td class="left"></td>
            <td>Вот здесь пишем текст</td>
            <td class="right"></td>    
        </tr>

        <tr>
            <td class="corner" id="bottomleft"></td>
            <td class="bottom"><img alt="popup tail" src="files/bubble-tail2.png" height="29" width="30" /></td>
            <td id="bottomright" class="corner"></td>
        </tr>
    </tbody></table>
</div>

CSS

Теперь прописываем стили всем элементам, при этом делаем так, чтобы при отключенных скриптах ничего не плыло:

.bubbleInfo {
	position: relative;
	top: 150px;
	left: 100px;
	width: 500px;
}
.trigger {
	position: absolute;
}

.popup {
	position: absolute;
	display: none;
	z-index: 50;
	border-collapse: collapse;
	font-size: .8em;
}

.popup td.corner {
	height: 15px;
	width: 19px;
}

.popup td#topleft { 
	background-image: url(files/bubble-1.png); 
} 

.popup td.top { 
	background-image: url(files/bubble-2.png); 
}

.popup td#topright { 
	background-image: url(files/bubble-3.png); 
}

.popup td.left { 
	background-image: url(files/bubble-4.png); 
}

.popup td.right { 
	background-image: url(files/bubble-5.png); 
}

.popup td#bottomleft { 
	background-image: url(files/bubble-6.png); 
}

.popup td.bottom { 
	background-image: url(files/bubble-7.png); 
	text-align: center;
}

.popup td.bottom img { 
	display: block; 
	margin: 0 auto; 
}

.popup td#bottomright { 
	background-image: url(files/bubble-8.png); 
}

jQuery

Теперь сам код, который реализовывает эту прикольную анимацию.

$(function () {
    $('.bubbleInfo').each(function () {
        var distance = 10;
        var time = 250;
        var hideDelay = 500;

        var hideDelayTimer = null;

        var beingShown = false;
        var shown = false;
        var trigger = $('.trigger', this);
        var info = $('.popup', this).css('opacity', 0);


        $([trigger.get(0), info.get(0)]).mouseover(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            if (beingShown || shown) {
                return;
            } else {
                beingShown = true;

                info.css({
                    top: -40,
                    left: -33,
                    display: 'block'
                }).animate({
                    top: '-=' + distance + 'px',
                    opacity: 1
                }, time, 'swing', function() {
                    beingShown = false;
                    shown = true;
                });
            }

            return false;
        }).mouseout(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                info.animate({
                    top: '-=' + distance + 'px',
                    opacity: 0
                }, time, 'swing', function () {
                    shown = false;
                    info.css('display', 'none');
                });

            }, hideDelay);

            return false;
        });
    });
});

Конец

И вот, что получиться, если собрать все воедино. Надеюсь, урок вам понравился ;-)