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

Пользовательские подсказки средствами jQuery

От автора: довольно часто возникает потребность «повесить» на некий элемент сайта описание, своеобразную всплывающую подсказку. Такая необходимость может быть вызвана тем, что необходимо объяснить пользователю какие функции выполняет тот или иной элемент сайта. Или попросту Вы хотите добавить некое описание к фото или картинке.

В этом уроке, мы рассмотрим способ создания всплывающей подсказки на jQuery. Все это можно сделать, поместив описание рядом с объектом, но для этого не всегда хватает свободного места, да и структура сайта может усложнить подобную реализацию. Здесь нам здорово помогут всплывающие подсказки. Их можно реализовать стандартным атрибутом title. Но можно попробовать создать и собственные всплывающие подсказки на jQuery, которые не будут ограничены стандартным стилевым оформлением атрибута title, предложенным тем или иным браузером.

Детали учебника «Создание всплывающей подсказки на jQuery»

Тема: jQuery

Сложность: Легкая

Урок: Видео (.mp4)

Время: 00:33:01

Размер архива: 32 Mb

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP. Немного разбираюсь в JavaScript’e — в свободное время как раз занимаюсь его изучением.

скачать исходникискачать урок

Прежде, чем мы приступим к реализации задуманного, необходимо обрисовать задачу и набросать алгоритм ее реализации. Для понимания того, что мы хотим получить, попросту рассмотрим минусы стандартной подсказки, получаемой атрибутом title. Итак, таковыми есть:

появление подсказки с задержкой;

исчезновение подсказки после движения указателем мыши по объекту;

стандартная стилизация.

Таким образом, пользовательская подсказка должна быть лишена указанных минусов. Теперь о реализации. Очевидно, что подсказка должна быть помещена в некий атрибут объекта и при движении мышью по области объекта необходимо получить значение атрибута с подсказкой и показать его.

Показывать подсказку мы будем в специально созданном блоке. Но, если мы просто разместим блок в потоке элементов, то его положение всегда будет фиксированным, т.е. он всегда будет находиться на одном месте. Нам же необходимо, чтобы блок с подсказкой всегда «следовал» за указателем мыши все время, когда указатель находится на объекте. Добиться этого можно, задав блоку абсолютное позиционирование. Ну а координаты блока будут задавать динамически, на основе координат текущего положения мыши.

Также необходимо учесть, что изначально блок для подсказки должен быть скрыт. При наведении на объект — его нужно показать, а при уходе из области объекта — вновь скрыть. Итак, мы обрисовали пространно наш алгоритм. Теперь давайте систематизируем это:

Блок для подсказки изначально скрыт.

При движении курсора мыши по объекту считываем атрибут с подсказкой.

Получаем координаты указателя мыши.

Присваиваем полученные координаты абсолютно позиционированному блоку с подсказкой.

Выводим подсказку из пункта 2 в блок.

Показываем блок с подсказкой.

Когда мышь «уходит» с объекта — скрываем блок.

Алгоритм готов, приступим к реализации.

Для начала создадим 2 объекта, с которыми будем работать — ссылку и картинку. Также в любом месте кода добавим блок для подсказки:

<div id="hint">111</div>
<a class="hover" rel="Просто ссылка" href="#">Link</a>
<br><br><br>
<a class="hover" rel="jQuery"><img src="logo_jquery.jpg" /></a>

В блок для подсказки с идентификатором hint мы поместили набор любых символов, чтобы блок был виден:

Ссылкам мы добавили атрибут rel, в который и помещены подсказки. Также каждой ссылке мы дали класс hover, чтобы можно было работать с объектами при помощи jQuery. Сейчас блок подсказки виден и находится в общем потоке элементов. Давайте для начала спозиционируем его абсолютно и пока что вручную зададим ему координаты. Для этого добавим стилевое правило для идентификатора hint:

#hint{
	position:absolute;
	border:1px solid #ccc;
	top:20px;
	left:100px;
}

После этого мы получим следующую картину:

Теперь, согласно алгоритму, считаем подсказку объекта, по которому движется мышь. Но прежде — получим координаты указателя мыши. В этом нам поможет событие mousemove(). Данное событие происходит тогда, когда указатель мыши двигается над областью элемента. Обработчику события передается одна переменная — объект события. В свойствах этого объекта — clientX, clientY — и находятся координаты указателя.

Получим координаты и выведем их в блок подсказки (не забудьте убрать текст, который в блоке мы писали изначально):

$(document).ready(function(){
	$('.hover').mousemove(function(e){
		$('#hint').text(e.clientX + ' ' + e.clientY);
	});
});

Теперь при движении по элементу происходит считывание координат указателя мыши относительно окна браузера и эти координаты (X и Y) меняются в блоке hint.

Отлично! Координаты у нас есть, следовательно — можно позиционировать блок hint. Добавим немного стилей блоку (также уберем атрибуты top и left из стилей):

#hint{
	display:none;
	position:absolute;
	border:1px solid #ccc;
	padding:5px;
	background:yellow;
	border-radius:5px;
}

Теперь блок скрыт. Его мы будем открывать по событию mousemove(). В функции по событию mousemove() получим значение атрибута rel элемента, на котором произошло само событие:

$(document).ready(function(){
	$('.hover').mousemove(function(e){
		var hint = $(this).attr('rel');
	});
});

Укажем координаты блока hint, воспользовавшись методом css():

$(document).ready(function(){
	$('.hover').mousemove(function(e){
		var hint = $(this).attr('rel');
		$('#hint').css({'left': e.clientX + 10, 'top': e.clientY + 10});
	});
});

Здесь мы также к имеющимся координатам добавили по 10 пикселей. Сделано это для того, чтобы блок hint имел небольшой отступ от курсора мыши.

Ну и, наконец, добавим текст подсказки в блок и покажем сам блок:

$(document).ready(function(){
	$('.hover').mousemove(function(e){
		var hint = $(this).attr('rel');
		$('#hint').css({'left': e.clientX + 10, 'top': e.clientY + 10});
		$('#hint').show().text(hint);
	});
});

В итоге мы получили пользовательскую всплывающую подсказку:

Осталось скрыть блок hint после того, как указатель уходит с объкта. Здесь воспользуемся событием mouseout() и методом hide():

$(document).ready(function(){
	$('.hover').mousemove(function(e){
		var hint = $(this).attr('rel');
		$('#hint').css({'left': e.clientX + 10, 'top': e.clientY + 10});
		$('#hint').show().text(hint);
	}).mouseout(function(){
		$('#hint').hide();
	});
});

Вот, собственно, и все. Теперь блок с подсказкой показывается при движении курсора мыши по объекту и скрывается, когда указатель покидает область объекта.

Также можно попробовать задать пользовательский атрибут элементам и работать с ним. Например, дадим элементам атрибут ht:

<div id="hint"></div>
<a class="hover" ht="Просто ссылка" href="#">Link</a>
<br><br><br>
<img class="hover" ht="jQuery" src="logo_jquery.jpg" />
<p class="hover" ht="Параграф" style="border:1px solid red; width:300px;">Какой-то текст</p>

Соответственно, в коде jQuery будем работать уже с данным атрибутом:

$(document).ready(function(){
	$('.hover').mousemove(function(e){
		var hint = $(this).attr('ht');
		$('#hint').css({'left': e.clientX + 10, 'top': e.clientY + 10});
		$('#hint').show().text(hint);
	}).mouseout(function(){
		$('#hint').hide();
	});
});

Мы реализовали поставленную задачу, создали всплывающую подсказку на jQuery, на этом урок можно заканчивать. Далее все зависит лишь от Вас и ограничено лишь Вашей фантазией. Можно стилизовать блок подсказки как угодно — добавить фоновое изображение, тень, изменить шрифт и т.д. В итоге можно получить симпатичную подсказку, которую можно применить к любому элементу сайта, добавив таким образом своеобразную изюминку.

Удачи Вам и до новых встреч!

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (12)

  1. Dmitry

    Очень полезный урок для начинающих. Посмотрите, как реализована подсказка на сайте, который я делал по знакомству в начале 2010 года. Ваш код, на мой взгляд, смотрится более элегантно. Но мою подсказку ищет поиск Интернета, а вот Вашу не знаю… :)

  2. Александр

    Андрей, спасибо!
    У Вас все уроки замечательные! Не пропускаю ни одного и каждый раз получаю удовольствие и от материала и от подачи)))
    Еще раз спасибо большое!

  3. Trofim

    Ни хрена не работает ваш скрипт по-людски, ребята. Всё красиво, пока контент умещается целиком на экране. Как только появляется скролл вертикальной прокрутки, подсказка начинает «уползать» вслед за верхним краем документа. Совершенно бесполезный урок. Те, кто поопытнее, возможно, и найдут решение. А начинающим – никакой пользы. Только душу «травите».

    • Андрей Кудлай

      Наконец-то, спустя год после публикации урока я увидел, что кто-то нашел баг и сообщил о нем… пусть и немного в некорректной форме, но тем не менее…
      Итак, это прежде всего урок… любой урок призван сподвигнуть изучающего на анализ изучаемого материала.
      Суть в том, что координаты clientX/clientY высчитываются относительно окна, т.е. без учета скролла… если же нужно учитывать скролл, тогда используем pageX/pageY, которые высчитываются уже относительно всего документа, т.е. с учетом скролла… таким образом, достаточно в одной строке заменить e.clientX и e.clientY на e.pageX и e.pageY и скрипт начнет работать по-людски.

      • Trofim

        Спасибо, за оперативный ответ. Сразу приношу извинения за нелицеприятный отзыв. Это я от отчаяния. Эффект мне понравился. Но я, учитывая дату публикации, даже не рассчитывал, что кто-то это прочтёт. Не говоря уже о рецепте для лечения. Поправил в соответствии с Вашими рекомендациями. Счастлив до небес. Надеюсь, Вы понимаете, что написанное мною ранее, никоим образом не касается ни содержания уроков, ни формы подачи материала. Здесь всё только в превосходных степенях. Интересно, доступно и наглядно. С уважением.

  4. Алексей

    Спасибо! А можно в виде дополнения к статье хотя бы комментарий на тему: как при помощи координат мыши сделать так, что бы подсказка выскакивала не при наведении мыши на блок картинки, а при наведении мыши внутри блока картинки конкретно на надпись «JQuery», ограничив эту надпись 4 точками.

    • Андрей Кудлай

      Как вариант, для этого нужно знать координаты надписи, а затем сравнить их с координатами мыши. В зависимости от результата — показать подсказку. Есть более простой вариант: картинка — это фон, ну а надпись — это либо текст, либо же прозрачная картинка. В таком случае алгоритм останется прежний.

  5. Алексей

    Почему середину съедает не понятно. Админ, извини.

    • Андрей Кудлай

      Алексей, для решения вопросов, связанных с кодом, у нас есть форум.

  6. Игорь

    Вопрос по оформлению всплывающей подсказки.
    Как можно изменить размер, начертание цвет и семейство шрифта всплывающей подсказки?
    Ведь сам блок с идентификатором #hint, пустой. Следовательно, берется какой-то шрифт по умолчанию. Где это умолчание искать?
    Правила для шрифта, прописанные в стилях блока #hint, результата не дали.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree