всплывающие подсказки
Или как их еще называют – баблы.
Код пузыря и объекта, при наведении курсора на который будет появляться подсказка.
<div>
<div id="download">Наведи на меня курсор</div>
<table style="opacity: 0; top: -50px; left: -33px; display: none;" id="dpop">
<tbody><tr>
<td id="topleft"></td>
<td></td>
<td id="topright"></td>
</tr>
<tr>
<td></td>
<td>Вот здесь пишем текст</td>
<td></td>
</tr>
<tr>
<td id="bottomleft"></td>
<td><img alt="popup tail" src="files/bubble-tail2.png" height="29″ width="30″ /></td>
<td id="bottomright"></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;
});
});
});