Изучаем jQuery. Простые стилизованные подсказки

Подсказка представляет собой компонент интерфейса, который появляется, когда пользователь наводит указатель мыши на какой-либо элемент управления. Подсказки можно встретить в большинстве браузеров; если вы наделите ссылку атрибутом title либо изображение, браузер станет выводить его на экран как подсказку при наведении указателя мыши на такой элемент. Обычно подсказки отображаются на экране, когда пользователь наводит указатель мыши на гиперссылку, и содержат дополнительную информацию о том, куда эта ссылка ведет.
Из книги "Изучаем jQuery. 2-е изд.", стр.175

10 сайтов, необходимых верстальщику

script.js

$(document).ready(function(){
  $('.location').hover(function(event){
    // Hover over code
    var titleText = $(this).attr('title');
    $(this)
      .data('tipText', titleText)
      .removeAttr('title');
      
    $('<p class="tooltip"></p>')
      .text(titleText)
      .appendTo('body')
      .css('top', (event.pageY - 10) + 'px')
      .css('left', (event.pageX + 20) + 'px')
      .fadeIn('fast');
  }, function() {
    // Hover out code
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip').remove();
  }).mousemove(function(event){
    // Mouse move code
    $('.tooltip')
      .css('top', (event.pageY - 35) + 'px')
      .css('left', (event.pageX + 20) + 'px');
  });
});