Уже ни для кого не секрет, что чем проще и информативный сайт тем лучше. Но тут у разработчиков возникает проблема компоновки информационных блоков. С одной стороны нужно делать все понятно и интуитивно для пользователя, с другой — вложить максимально полезной информации. И чем сложнее проект, тем меньше места остается на блоки с подсказками. Идеальным решением стало использование всплывающих подсказок.

В данном уроке мы рассмотрим пример, как можно создать всплывающие подсказки используя ссылки. Мы будем выводить подсказки на примере этого блока текста

<div id="wrapper">
<p>Pellentesque habitant morbi tristique <a href="#" data-title="I am happy!" class="need_hint">senectus</a> et netus et malesuada fames ac <a href="#" data-title="Hi, I'm a tooltip thingy." class="need_hint">turpis</a> egestas. Vestibulum tortor quam, feugiat, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat <a href="#" data-title="Ooooh<br>Look at me<br>I'm a fancy tooltip" class="need_hint">eifend</a> leo.</p>
</div>

Здесь можно увидеть структуру тега а. В нем появился замечательный атрибут data. Это фишка взята из HTML5. В данном примере мы записываем в атрибут data-title сам текст подсказки. К ссылке, для которой нужно подсказка, присваиваем класс need_hint.

Важно!  Если Вы используете в ссылках атрибут alt, то будет выводиться стандартная всплывающая подсказка с описанием ссылки. Если ссылка не индексируется, тогда уберите атрибут alt.

Подключаем библиотеку jQuery.

Теперь рассмотрим код jquery

$(function(){

$('a.need_hint').each(function(){
var title = $(this).attr('data-title');
var width = $(this).width();
var height = $(this).height();
$(this).wrap('<div class="wrapper_hint">').css({cursor : 'pointer'});
$(this).parent('.wrapper_hint').append('<div class="hint">'+title+'<span class="arrow_hint"></span></div></div>');
var width_hint = $(this).siblings('.hint').width();
var width_arrow = $(this).siblings('.hint').find('.arrow_hint').width();
var leftPos = (width_hint-width)/2+width_arrow;
$(this).siblings('.hint').css({left : -leftPos, bottom : height+10 });
});

$('.need_hint').hover(function(){
$(this).parent('.wrapper_hint').find('.hint').stop(true,true).show('scale',{direction:'down'},300);
},function(){
$(this).parent('.wrapper_hint').find('.hint').stop(true,true).hide('scale',{direction:'down'},200);
})

});

Через jquery выбираем  все ссылки с классом need_hint, записываем значение атрибута data-title в переменную, записываем ширину и высоту элемента. Далее оборачиваем ссылку контейнером div с классом wrapper_hint и присваиваем ему стиль курсора. Вставляем в него наш блок всплывающей подсказки и выравниваем его ровно по центру ссылки.

Далее определяем действия при наведении курсора на нашу ссылку: показывать подсказку или скрывать.

Код css тоже не представляет труда:

.wrapper_hint{
position: relative;
display: inline;
}

.hint, .arrow_hint{
border: 2px solid silver;
background: #F7F7F7;
}

.hint{
position: absolute;
z-index: 1000;
padding: 10px;
padding-bottom: 15px;
border-radius:15px;
display: block;
min-width: 70px;
white-space: nowrap;
display: none;
}

.arrow_hint{
display: block;
position: absolute;
width: 16px;
height: 16px;
left: 50%;
bottom: -12px;
margin-left: -8px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}

.arrow_hint:after{
content: "";
position: absolute;
background: #F7F7F7;
width: 19px;
height: 19px;
top: -3px;
left: -3px;

}

Для изменения стиля  подсказки, измените стиль для класса hint и arrow_hint.

Вот и все! Мы достигли нашего результата!

UPDATE! Скрипт переделан в виде плагина. Качайте исходник. Для работы необходимо в теги head подключить скрипт.

<script src="jquery.hint.js"></script>
<script src="scripts.js"></script>

А в файле scripts.js достаточно прописать:

$('a.need_hint').needHint();

Свои вопросы оставляйте в комментариях!