CSS tooltips очень популярны в современном веб дизайне, и, вопреки широко распространенному мнению, их довольно легко создать, особенно с помощью различных популярных javascript-framework-ов.

Вы, конечно, можете использовать стандартный плагин, но чтобы сделать простой tooltip Вам достаточно написать всего 10 строк кода jQuery и CSS.

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

<a href="#" title="Это обыкновенный Tooltip">Ссылка</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 7px;
}

Свойство 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. Мы используем переменные здесь в целях придания гибкости скрипту, таким образом Вы можете добавить различные подсказки с различным стилями.

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

Здесь мы генерируем код для каждого пункта, который будет найден нашим скриптом. Переменная i, которую мы передаем функции, будет автоматически увеличена jQuery после каждого повторения. Таким образом мы будем в состоянии дать каждому tooltip уникальный 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-код для каждой всплывающей подсказки. Они все получают один и тот же с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");
});

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


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

    Комментарии  

    #21 Evgeny 14.06.2013 03:20
    Прочитал комментарии и увидел, что надо еще подключить jquery:


    Взял его прямо с этого сайта. Теперь работает. Жаль автор не упомянул об этом в статье. Новичкам трудновато.
    +1 #22 подсказа супер 09.07.2013 12:37
    подсказка супер, еще я пришила проверку на класс ссылки, т.к. не вовсех ссылках на странице, где есть title нужно появление тултипа

    получился такой код

    function simple_tooltip(target_items, name){


    $(target_items+"[title]").each(function(i ){
    if($(this).attr('class') == "tip"){
    $("body").append(""+$(this).attr('title')+"");
    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");
    });

    You have no rights to post comments