Показать Меню
falbar Подсказка

Всплывающая подсказка с HTML кодом

Подсказка

Всплывающая подсказка вещь не новая, но когда возникает необходимость реализовать у себя на странице, то часто возникает вопрос: как лучше сделать? Вариантов для реализации подсказки множество: будь-то крупные библиотеки, к примеру, jQuery или MooTools, либо готовые плагины, а кто-то просто воспользуется стандартными средствами HTML и CSS. Главное: сделать вплывающую подсказку интересной и привлекательной для пользователя.

Сегодня мы будем делать три вида подсказок: текстовая всплывающая подсказка, всплывающая подсказка со ссылкой и всплывающая подсказка с картинкой. Для этого мы будем использовать лишь HTML и CSS3.

В предыдущих статьях я рассматривал похожие варианты, которые, возможно, будут вам более подходящими:

И так, давайте притупим и начнём c разметки нашей будущей подсказки:

<div class="help-tip">
	<p>
		<!-- 
			Здесь будет находиться
			 нужный нам контент
		 -->
	</p>
</div>

Теперь займёмся CSS стилями и начнем, пожалуй, с обёртки:

.help-tip{
	position: absolute;
	top: 18px;
	right: 18px;
	text-align: center;
	background-color: #bcdbea;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	font-size: 14px;
	line-height: 26px;
	cursor: default;
}

При помощи позиционирования мы помещаем подсказку в нужное нам место, а также задаем стили для визуализации и общие стили для внутренних элементов.

.help-tip:before{
	content: "?";
	font-weight: bold;
	color: #fff;
}

Воспользуемся псевдоэлементом :before и добавим в обёртку знак вопроса – это проинформирует нашего посетителя, о том, где можно получить поясняющую информацию.

.help-tip p{
	display: none;
	text-align: left;
	background-color: #1e2021;
	padding: 20px;
	width: 300px;
	position: absolute;
	border-radius: 3px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	right: -4px;
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
}

Весь поясняющий контент, который будет находиться во всплывающей подсказке, мы поместим в элемент p, но это условно, можно использовать любой другой тег, главное его спрятать display: none; и отпозиционировать относительно обёртки.

.help-tip:hover p{
	display: block;
	transform-origin: 100% 0%;
	-webkit-animation: fadeIn 0.3s ease-in-out;
	animation: fadeIn 0.3s ease-in-out;

}

Пользователь наводит курсор на подсказку, а мы показываем спрятанный контент. Для того чтобы добавить плавность используем свойство из CSS3 animation.

.help-tip p:before{
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-bottom-color: #1e2021;
	right: 10px;
	top: -12px;
}

И завершающая часть - это добавление стрелочки.

Обещал три, а сделали вроде, как только одну – метод универсален, в обертку можно класть все что угодно, даже солидный кусок HTML кода, если, конечно, изрядно попотеть с подгонкой стилей:

<div class="help-tip">
	<p>
		Это подсказка с <b>HTML кодом!</b>
		<a href="http://falbar.ru/">и ссылками!</a>
		Вы сможете сделать
		<i><strike>намного больше</strike></i>!
	</p>
</div>

Для картинки:

<div class="help-tip">
	<p>
		Это подсказка с картинкой внутри!
		<br>
		<br>
		<img width="300" src="balloon.jpg">
	</p>
</div>

Как видите, сделать всплывающую подсказку оказалось не так уж сложно, и, в нашем случае, мы обошлись без использования javascript, что иногда имеет смысл. Перейдя по ссылке «демо» Вы сможете ознакомиться с тремя случаями использования данного кода.

Источник
tutorialzine.com

Подписаться на обновления

Комментариев еще не оставлено