Открыть меню    

Простая всплывающая и плавающая подсказка на jQuery

подсказка на jQuery, плавающая Что такое подсказка:

Подсказка это небольшой всплывающий блок, который проявляется в момент наведения мышки на элемент-триггер. Этот всплывающий блок содержит краткую информацию об элементе-триггере. Таким образом, подсказки повышают удобство интерфейса.

В этой статье я покажу, как можно добавить подсказки на ваш сайт, используя jQuery.

Создайте несколько ссылок и назначьте каждой ссылке соответствующий data-атрибут. Data-атрибуты весьма полезная вещь, с их помощью вы можете внедрять в теги какую-либо информацию, а затем извлекать ее посредством jQuery. В нашем случае каждый data-атрибут ссылки будет содержать информацию, которая и будет отображаться внутри всплывающей подсказки. Также каждой ссылке присвойте класс hover, с помощью данного класса мы сможем стилизовать сразу все ссылки-триггеры.

HTML


<a href="#" class="hover" data-tooltip="Homepage">Home</a> 
/ <a href="#" class="hover" data-tooltip="latest news">Blog</a>

Добавьте пустой блок div с id hovertitle. Ваш html код должен выглядеть следующим образом:

HTML


<div id="hovertitle"></div>
<a href="#" class="hover" data-tooltip="Homepage">Home</a>
 / <a href="#" class="hover" data-tooltip="latest news">Blog</a>

Блоку #hovertitle пропишите следующее стилевое правило:

CSS

#hovertitle {
	display: none;
	position: absolute;
	font-size: 12px;
	padding: 7px;
	background: #ddd;
	color: #222;
	border: 1px solid #9e9e9e;
	border-radius: 2px;
}

Подключите внешнюю или внутреннюю библиотеку jQuery. Я, как обычно, подключил внешнюю библиотеку, взятую непосредственно с сайта jQuery.

Следующий код будет показывать всплывающую подсказку при наведении мышки на элементы-триггеры (ссылки). Подсказка будет плавающая, то есть она будет следовать за мышкой в пределах элемента-триггера.

JQuery



$(document).ready(function() {

$(".hover").mousemove(function(e) {
var hovertext = $(this).attr("data-tooltip");
$("#hovertitle").text(hovertext).show();
$("#hovertitle").css('top', e.clientY+12).css('left', e.clientX+12);
}).mouseout(function() {
$("#hovertitle").hide();
});

});


e, clientY и clientX

e - объект, содержащий данные о произошедшем событии.

Координаты курсора мыши относительно окна находятся в стандартных свойствах clientX, clientY.

Если у вас есть окно 600x600, и мышь находится в центре, то clientX и clientY будут равны 300. Если вы затем проскроллируете документ вниз, не двигая курсор - значения clientX, clientY не изменятся, так как отсчитываются относительно окна, а не документа.

меню и подсказки на jQuery

Источник

Комментарии к статье

аватарка пользователя
2014-03-27
Роман

Очень полезно, но там ошибочка:
CSS
position: absolute; Не корректно отображается.
А вот с position: fixed; всё круто =) Спасибо!

аватарка пользователя
2015-03-12
Александр

Роман, спасибо за комментарий! не пришлось мозги напрягать :)

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