$(document).ready(function(){  //скрипт выполняется приготовности всех DOM элементов

$('[rel=tooltip]').bind('mouseover', function(){ //для всех элементов у которых rel равен tootltip при наведениии курсора выполняется функция

$('<div class="tooltip"></div>').appendTo('body').load($(this).attr('title2'));//themessage выводим между тегами div с классом tootltip
$(this).bind('mousemove', function(e){ //функция определяет положение мыши и переносит за ним подскаску

			width_limit = $("div.tooltip").width() + 30;
			height_limit = $("div.tooltip").height();
			if($(window).width() - e.pageX < width_limit)  // если подсказка не помещается между курсором и правым краем окна браузера
			{
			   block_left = e.pageX - width_limit;  // ставим подсказку слева от курсора
			}
			else
			{
			  block_left = e.pageX + 10;  // в противном случае ставим подсказку справа от курсора
			}
			if($(window).height() - e.clientY < height_limit) // если подсказка не помещается между курсором и нижним краем окна браузера
			{
			   if(e.clientY > height_limit) // если над курсором достаточно места для подсказки
			   {
			   block_top = e.pageY - height_limit - 10; // ставим подсказку сверху от курсора
			   }
			    else
				{ block_top = e.pageY - e.clientY + 10; //в противном случае - на 10 пикселей ниже верхнего края окна
				}
			}
			else
			{
			  block_top = e.pageY + 10; // в противном случае ставим подсказку снизу от курсора
			}

			$('div.tooltip').css({
				'top': block_top,
				'left': block_left
			});  // позиционируем подсказку

		});
	}).bind('mouseout', function(){ //функция убирает подсказку если мышка не на объекте
		$('div.tooltip').fadeOut('fast', function(){
			$(this).remove();
		});
	});
   });