Как сделать надпись или подсказку под курсором мыши на jQuery.

Хочу рассказать еще об одной задаче, которую мне приходилось решать на jQuery.

Смысл такой:

Был определенный блок на странице (элемент div). Заказчику нужно было, чтобы при наведении курсора мыши на этот блок, рядом с курсором мыши появлялась подсказка. Эта подсказка представляла собой текст на белом фоне. Было важно, чтобы, когда курсор мыши покидал выбранный блок, подсказка исчезала.

В конечном итоге, это должно было выглядеть примерно вот так:

Реализован такой эффект на Javascript и jQuery. Давайте рассмотрим исходный код.

Начнем с HTML содержимого:

<div id="floatingmes">Подсказка</div>
<div id="block"></div>

Есть два блока:

Floatingmes – блок с подсказкой, которая будет возникать

Block – Основной блок, при наведении курсора мыши на который, будет возникать всплывающая подсказка.

Стили CSS для этих блоков следующие:

<style type="text/css">
#floatingmes {position:absolute; top:0; left:0; width:100px; 
background:#FFF; opacity:0.85; border:1px solid #000;}
#block {width:500px; height:500px; background:#900;}
</style>

И, наконец, скрипты, которые заставляют подсказку двигаться:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
   $("#block").mousemove(       
                function (pos) { 
                $("#floatingmes").show();
              $("#floatingmes").css('left',(pos.pageX+10)+'px').css('top',(pos.pageY+10)+'px');          
    }    
   ).mouseleave(function() {
    $("#floatingmes").hide(); 
});
});
</script>

Для элемента block создается событие mousemove и mouseleave, которые будут выполняться при передвижении курсора по блоку и при уходе мышки из него.

Когда мышка «покидает» блок, подсказка просто исчезает.

$("#floatingmes").hide();

Когда курсор мышки вновь попадает в пределы блока, мы показываем подсказку

$("#floatingmes").show();

И изменяем ее позицию, в зависимости от того места, где находится курсор со смещением, 10 пикслей.

 $("#floatingmes").css('left',(pos.pageX+10)+'px').css('top',(pos.pageY+10)+'px');

Алгоритм примерно такой. Надеюсь пример оказался полезным и вы возьмете себе его на вооружение.