//Всплывающие подсказки
function  simple_tooltip(target_items, name){
    $(target_items).each(function(i){
        //Для каждого элемента, который должен содержать подсказку
        //создаем контейнер  после тега body со значением атрибута title
        //Все контейнеры снабжаются ункальным id (имя+счетчик)
        $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
       
        //Переменная хранит ID текущего контейнера-подсказки
        var my_tooltip = $("#"+name+i);
        
        //Удаляем title у элементов, чтобы предотвратить появление стандартной подсказки
        //Назжначаем каждому элементу события mouseover, mousemove, mouseout
        $(this).removeAttr("title").mouseover(function(){
            $(my_tooltip).attr("hover", "hover");

            //Триггер-функция, которая предотвращает появление подсказки
            //когда курсор уже не находится на элементе. Устанавливается задержка
            //срабатывания. Далее проверяется флаг -
            //наличие hover="hover" у текущего контейнера
            setTimeout(function(){
                if ($(my_tooltip).attr("hover") == "hover"){
                    my_tooltip.css({
                        opacity:0.8,
                        display:"none"
                    }).fadeIn(500);
                }
            }, 500);

        //Положение контейнера подсказки относительно курсора
        }).mousemove(function(kmouse){
            my_tooltip.css({
                left:kmouse.pageX+15,
                top:kmouse.pageY+15
            });

        //Затухание подсказки при перемещение указателя вне границ элемента
        //Сброс флага для триггер функции.
        }).mouseout(function(){
            $(my_tooltip).removeAttr("hover");
            my_tooltip.fadeOut(500).unbind();
        });
    });
}

$(document).ready(function(){
    simple_tooltip("a.menuleft[title]","tooltip");
});


