Статья из раздела "зачем плагины, библиотеки - сделай сам". В этот раз рассмотрим реализацию очень интересного инструмента, который очень полезен в каких-либо интерфейсах, где важно выводить подсказки, напоминалки для посетителей сайта.
На самом деле реализация тултипов(tooltip) очень проста и не требует вмешательства каких-либо внешних плагинов, все намного проще. Элемент, к которому нужно выводить tooltip, необходимо отметить селектором и атрибутом, в котором будет находиться текст подсказки или даже html. При наведении на элемент текст подсказки будет размещен в блоке тултипа. Сам блок с помощью javascript/jQuery размещаем вблизи с исходным элементом. Остается только стилизовать tooltip.
Итак, приступим:
Размещаем html со следующим содержанием:
<div class="tooltip-elems"> <?/* блок с элементами, при наведении на которые, раскрывается tooltip */?>
<?/* в атрибуте data размещаем текст/html подсказки: */?>
<p class="tool-item" data="Умеет летать, стрелять лазером и состоит из стали">Супермен</p>
<p class="tool-item" data="Неуязвимый, сильный и ловкий тип, выпускающий прочную паутину">Человек-паук</p>
<p class="tool-item" data="Гений, миллиардер, плейбой, филантроп">Железный человек</p>
<p class="tool-item" data="Зеленая масса мышц">Халк</p>
</div>
<?/* блок тултипа: */?>
<div class="tooltip-block"></div>
Стилизуем элементы и всплывающий тултип:
.tool-item{ /* элементы */
border-bottom: 1px dashed black;
display: inline-block;
margin-right: 20px;
cursor: pointer;
}
.tooltip-block{ /* тултип */
position: absolute;
background: white;
border: 1px solid rgb(230, 230, 230);
padding: 5px 8px;
font-size: 10px;
width: 140px;
line-height: 13px;
color: rgb(82, 82, 82);
z-index: 400;
display:none;
}
Javascript/jQuery:
<script type="text/javascript">
$(document).ready(function(){//страница загрузилась
$('.tool-item').hover(function(){ //при наведении на элемент:
var helptext = $(this).attr('data') //текст подсказки
$('.tooltip-block').html(helptext).show(); //размещаем текст подсказки в блок тултипа и делаем его видимым
//далее устанавливаем тултипу значения позиции с помощью абсолютного позиционирования:
//позиция элемента сверху + высота элемента -> $(this).offset().top+$(this).height()
//позиция элемента слева -> $(this).offset().left
$('.tooltip-block').offset({top:$(this).offset().top+$(this).height(),left:$(this).offset().left});
},function(){
$('.tooltip-block').hide(); //скрываем тултип
});
});
//в итоге подсказка окажется ровно под элементом наведения
</script>
Смотреть демо
Пример скрипта, который размещает tooltip справа от элемента наведения:
<script type="text/javascript">
$(document).ready(function(){//страница загрузилась
$('.tool-item').hover(function(){ //при наведении на элемент:
var helptext = $(this).attr('data') //текст подсказки
$('.tooltip-block').html(helptext).show(); //размещаем текст подсказки в блок тултипа и делаем его видимым
//далее устанавливаем тултипу значения позиции с помощью абсолютного позиционирования:
//позиция элемента сверху -> $(this).offset().top
//позиция элемента слева -> $(this).offset().left+$(this).width()+5
$(this).offset().left$('.tooltip-block').offset({top:$(this).offset().top,left:$(this).offset().left+$(this).width()+5});
},function(){
$('.tooltip-block').hide(); //скрываем тултип
});
});
//в итоге подсказка окажется справа от элемента наведения
</script>
Можно фантазировать над стилизацией тултипа: добавить уголок, придать тень, эффекты открытия блока и так далее. Например, на нашем сайте вы можете увидеть тултип на левой панели, работа основана на той же идее, которую мы рассмотрели в данной статье.
Смотреть демо