Всплывающие подсказки с помощью jQuery

Всплывающие подсказки с помощью jQuery. Введение

Всплывающие подсказки с помощью 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");
});

На этом все, выкладываю исходники — сюда.

Рассказать друзьям:


Всплывающие подсказки с помощью jQuery: 1 комментарий

  1. Спасибо, всё просто, но не совсем понятно))) Вот например, в функцию передаете num, откуда он берётся, не могу понять.. Я ещё только начал в это всё вникать, так что строго не суди) Понимаю, что это как бы номер элемента, но где он всплывает, этот номер?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*