Всплывающие подсказки с помощью jQuery. Введение
В этой статье я покажу, как можно с реализовать,часто используемый на сайтах, функционал — всплывающие подсказки. Работать подсказки будут на jQuery, поэтому не забудьте подключить эту библиотеку к своему проекту.
Смысл работы подсказок не сложный, все что нам потребуется, это обрабатывать три события: наведение курсора на элемент, отведение и событие, когда курсор перемещается по элементу. При наведении будем показывать подсказку, при отведении — скрывать, а при перемещении — двигать подсказку вслед за курсором. Еще один момент, который стоит упомянуть, это то, что для каждого элемента, к которому привязана подсказка, будет создаваться скрытый уникальный div с текстом подсказки, а при описанных выше событиях будем манипулировать этим div`ом.
На этом с теорией все, приступим к делу.
Всплывающие подсказки с помощью jQuery. Пример работы
Для начала приведу рабочий пример:
Подсказка с текстом. Наведи!
Без подсказки. Наведи!
Всплывающие подсказки с помощью jQuery. Код
А теперь код, начнем с верстки:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Всплывающие подсказки с помощью jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
.class_tooltip{
background-color: #FFC;
border: 1px solid #000;
border-radius: 0 7px 7px;
display: none;
padding: 5px;
position: absolute;
width: 200px;
}
</style>
</head>
<body>
<br/>
<span title="Текст всплывающей подсказки">Подсказка с текстом</span>
<br/>
<br/>
<span title="Текст<br/>подсказки с <b>html</b> <i>тегами</i> внутри">Подсказка с html тегами</span>
<br/>
<br/>
<span>Без подсказки</span>
</body>
</html>
И самое главное, js:
// функция для создания подсказок для элементов
// element - имя элемента, например span
function init_tooltip(element){
// перебираем все элементы на странице, для которых нужна подсказка
$(element).each(function(num){
// проверяем у элемента наличие атрибута title и смотрим пустой он или нет
if( $(this).attr('title') != "" && typeof($(this).attr('title')) != "undefined"){
// если есть title, то
// создаем скрытый блок - подсказку с текстом
$("body").append("<div class='class_tooltip tooltip_" + element + num + "'>" + $(this).attr('title') + "</div>");
// элемент, сама подсказка, только что созданная
var one_tooltip = $(".tooltip_" + element + num);
// навешиваем действия на события
// при наведении курсора
$(this).mouseover(function(){
// показываем подсказку
one_tooltip.fadeIn(100);
});
// при отведении курсора
$(this).mouseout(function(){
// скрываем подсказку
one_tooltip.fadeOut(100);
});
// при нахождении курсора на элементе
$(this).mousemove(function(curs_position){
// смещаем подсказку за курсором
one_tooltip.css({
// делаем отступ по 10 пикселей сверху и слева от курсора
left: curs_position.pageX + 10,
top: curs_position.pageY + 10
});
});
}
});
}
$(document).ready(function(){
// создаем подсказки для всех span`ов
init_tooltip("span");
});
На этом все, выкладываю исходники — сюда.
Спасибо, всё просто, но не совсем понятно))) Вот например, в функцию передаете num, откуда он берётся, не могу понять.. Я ещё только начал в это всё вникать, так что строго не суди) Понимаю, что это как бы номер элемента, но где он всплывает, этот номер?