Простая всплывающая и плавающая подсказка на 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

Источник