CSS tooltips очень популярны в современном веб дизайне, и, вопреки широко распространенному мнению, их довольно легко создать, особенно с помощью различных популярных javascript-framework-ов.
Вы, конечно, можете использовать стандартный плагин, но чтобы сделать простой tooltip Вам достаточно написать всего 10 строк кода jQuery и CSS.
Итак, приступим. Прежде всего обратите внимание на структуру этой всплывающей подсказки: это обыкновенная ссылка, которая будет выглядеть примерно так:
Позже мы будем использовать javascript, чтобы извлечь title и вставить его в контейнер:
<p>Это обыкновенный Tooltips</p>
</div>
CSS для нашего tooltips будет выглядеть примерно так:
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-код - краткий и простой:
Взгляните на весь скрипт, дальше я объясню попорядку что для чего.
$(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, но на самом деле все довольно просто. Прежде всего мы создаем функцию:
}
target_items - переменная, которую мы определяем, вызывая скрипт. Например: чтобы добавить tooltips ко всем ссылкам в блоке #maincontent, необходимо ввести “#maincontent а”. Name определяет css класс, который мы применяем для нашего tooltip. Мы используем переменные здесь в целях придания гибкости скрипту, таким образом Вы можете добавить различные подсказки с различным стилями.
$(target_items).each(function(i){
// generates code for each tooltip
});
}
Здесь мы генерируем код для каждого пункта, который будет найден нашим скриптом. Переменная i, которую мы передаем функции, будет автоматически увеличена jQuery после каждого повторения. Таким образом мы будем в состоянии дать каждому tooltip уникальный ID.
$(target_items).each(function(i){
$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
});
}
Этот фрагмент создает html-код для каждой всплывающей подсказки. Они все получают один и тот же сlass, но различные ID. Title добавляется между тегами р.
$(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 и сохраняет его в переменной для дальнейшего использования.
$(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, этот параметр очень важен, так как он хранит положение курсора мыши.
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.
simple_tooltip("a","tooltip");
});
Последнее что мы делаем - это вызываем скрипт, как только документ будет загружен. Как было упомянуто ранее, первый параметр - это селектор, а второй параметр - имя css-класса нашей всплывающей подсказки. Таким образом Вы можете создать различные варианты внешнего вида для разных подсказок.
ВКонтакте
Комментарии
Взял его прямо с этого сайта. Теперь работает. Жаль автор не упомянул об этом в статье. Новичкам трудновато.
получился такой код
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");
});