Tooltip (тултип) - всплывающая подсказка на html + javascript\jQuery

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

На самом деле реализация тултипов(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>
	

Можно фантазировать над стилизацией тултипа: добавить уголок, придать тень, эффекты открытия блока и так далее. Например, на нашем сайте вы можете увидеть тултип на левой панели, работа основана на той же идее, которую мы рассмотрели в данной статье.