Pull to refresh

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

Reading time 4 min
Views 70K
Original author: Christian “Kriesi” Budschedl
CSS tooltips очень популярны в современном веб дизайне, и вопреки широко распространенному мнению их довольно легко создать, особенно с помощью различных популярных javascript-framework-ов.

Вы, конечно, можете использовать стандартный плагин, но чтобы сделать простой tooltips, Вам достаточно написать всего 10 строк кода jQuery и CSS.
image
Итак, приступим. Прежде всего обратите внимание на структуру этого 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 7px;
}


* This source code was highlighted with Source Code Highlighter.


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");
});


* This source code was highlighted with Source Code Highlighter.

↑ Это может выглядеть сложным, особенно если Вы плохо знакомы с 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);
});


* This source code was highlighted with Source Code Highlighter.

Теперь мы определяем, что будет происходить, когда будут вызваны различные функции:
На 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.

А это результат нашей работы (См. внизу страницы и при наведении на картинку вверху страницы)
Tags:
Hubs:
+47
Comments 40
Comments Comments 40

Articles