<script type="text/javascript">
var time_reserve = 2000; // время, через которое появляется
var x_space = 0; // расстояние от курсора по x
var y_space = 10; // расстояние от курсора по y
window.onload = function() {
var tooltip = document.getElementById("tooltip");
window.setTimeout(function(){
document.body.onmousemove = function(e) {
tooltip.style.left = (e ? e.pageX : event.clientX + document.body.scrollLeft) + x_space;
tooltip.style.top = (e ? e.pageY : event.clientY + document.body.scrollTop) + y_space;
}
tooltip.style.display = 'block';
}, time_reserve);
}
</script>
<style type="text/css">
#tooltip {
background: gray;
position: absolute;
display: none;
}
</style>
Сейчас отсюда вылетит птичка!
<div id="tooltip">Очевидное очевидно</div>
У кода выше следующие недостатки - во-первых, он не рассчитан на то, что тултип может быть вложен в другой элемент, спозиционированный абсолютно или относительно (в этом случае style.top и style.left содержат относительные координаты, а не абсолютные), во-вторых, я не проверял его слишком внимательно на кроссбразерность - в случае событий с мышкой я обычно полагаюсь на jquery, ну и в-третьих это не валидный HTML5, но для примера самое то.
Советую улучшить свои коммуникативные навыки!
