Создаем простой tooltips с помощью CSS и jQuery

Для созадния tooltips (всплывающих подсказок) вы, конечно, можете использовать стандартный плагин. Но чтобы сделать это самостоятельно, достаточно написать всего 10 строк кода jQuery и CSS.

Итак, приступим. Прежде всего обратите внимание на структуру этого tooltips: это обыкновенная ссылка, которая будет выглядеть примерно так:

<a href="#" title="Это обыкновенный Tooltips">Ссылка</a>

Позже мы будем использовать javascript, чтобы извлечь title и вставить его в контейнер:

<div class="tooltip">
    <p>Это обыкновенный Tooltips</p>
</div>

CSS для нашего tooltips будет выглядеть примерно так:

.tooltip{
    position: absolute;
    z-index: 999;
    left: -9999px;
    background-color: #dedede;
    padding: 5px;
    border: 1px solid #fff;
    width: 250px;
}

.tooltip p{
    margin: 0;
    padding: 0;
    color: #fff;
    background-color: #222;
    padding: 2px 8px;
}

Значение свойства position должно быть absolute, для того чтобы Javascript мог установить top и left свойство для div, который будет размещаться  рядом с нашим курсором мыши. Пока мы устанавливаем свойство left = -9999px. Остальная часть CSS только для визуального оформления.

Создаем jQuery Tooltips:  jQuery-код - краткий и простой:

Взгляните на весь скрипт, дальше я объясню по порядку что для чего.

function simple_tooltip(target_items, name){
    $(target_items).each(function(i){
        $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
            var my_tooltip = $("#"+name+i);

        $(this).removeAttr("title").mouseover(function(){
            my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);
        }).mousemove(function(kmouse){
            my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
        }).mouseout(function(){
            my_tooltip.fadeOut(400);
        });
    });
}

$(document).ready(function(){
    simple_tooltip("a","tooltip");
});

Это может выглядеть сложным, особенно если Вы плохо знакомы с jQuery, но на самом деле все довольно просто. Прежде всего мы создаем функцию:

function simple_tooltip(target_items, name){
}

target_items - переменная, которую мы определяем, вызывая скрипт. Например: чтобы добавить tooltips ко всем ссылкам в блоке #maincontent, необходимо ввести “#maincontent а”. Name определяет css класс, который мы применяем для нашего tooltip. Мы используем переменные здесь в целях придания гибкости скрипту, таким образом Вы можете добавить различные tooltips с различным стилями.

function simple_tooltip(target_items, name){
    $(target_items).each(function(i){
        // generates code for each tooltip
    });
}

Здесь мы генерируем код для каждого пункта, который будет найден нашим скриптом. Переменная i, которую мы передаем функции, будет автоматически увеличена jQuery после каждого повторения. Таким образом мы будем в состоянии дать каждому tooltips уникальный ID.

function simple_tooltip(target_items, name){
    $(target_items).each(function(i){
        $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
    });
}

Этот фрагмент создает html-код для каждого tooltip. Они все получают один и тот же сlass, но различные ID. Title добавляется между тегами р.

function simple_tooltip(target_items, name){
    $(target_items).each(function(i){
        $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
        var my_tooltip = $("#"+name+i);
    });
}  

Эта строка выбирает tooltip и сохраняет его в переменной для дальнейшего использования.

function simple_tooltip(target_items, name){
    $(target_items).each(function(i){
        $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
        var my_tooltip = $("#"+name+i);
        $(this).removeAttr("title").mouseover(function(){
        }).mousemove(function(kmouse){
        }).mouseout(function(){
        });
    });
}

Это основная конструкция нашей функции. Прежде всего мы выбираем текущую ссылку $(this). Затем удаляем аттрибут title, так как мы не хотим что бы появлялся "нормальный" tooltip, который показывает каждый браузер, при наведении мыши на ссылку.

Затем мы вызываем 3 функции:

• mouseover вызывается, когда мы впервые наводим на ссылку;
• mousemove вызывается, когда мы перемещаем мышь над ссылкой;
• mouseout вызывается, когда мышь "уходит" с сылки.

Как Вы можете видеть, мы передаем параметр в mousemove, этот параметр очень важен, так как он хранит положение курсора мыши.

$(this).removeAttr("title").mouseover(function(){
    my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);
}).mousemove(function(kmouse){
    my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}).mouseout(function(){
    my_tooltip.fadeOut(400);
});

Теперь мы определяем, что будет происходить, когда будут вызваны различные функции:

• при mouseover мы устанавливаем некоторые значения css для tooltip: мы определяем прозрачность и устанавливаем display:none.
• при mousemove мы устанавливаем значения для top и left чтобы помещать tooltip рядом с курсором. Координаты  X и Y вызываются через .pageX и .pageY. Мы также добавляем небольшое смещение на 15 px, чтобы tooltip не находился непосредственно под курсором.
• при mouseout мы просто вызываем функцию fadeOut(), чтобы скрыть tooltip.

$(document).ready(function(){
    simple_tooltip("a", "tooltip");
});

Последнее что мы делаем - это вызываем скрипт, как только документ будет загружен. Как было упомянуто ранее, первый параметр - это селектор, а второй параметр - classname нашего tooltip. Таким образом Вы можете создать различные дизайны для разных tooltips.