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

25 июня 2015 Антон Кулешов 4459 0

Всплывающая подсказка вещь не новая, но когда возникает необходимость реализовать у себя на странице, то часто возникает вопрос: как лучше сделать? Вариантов для реализации подсказки множество: будь-то крупные библиотеки, к примеру, 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, но это условно, можно использовать любой другой тег, главное его спрятать и отпозиционировать относительно обёртки.

.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, что иногда имеет смысл. Перейдя по ссылке «демо» вы сможете ознакомиться с тремя случаями использования данного кода.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Создаем раскрывающиеся блоки тремя способами, используя jQuery, classList API и JavaScript

17 января 2015 Антон Кулешов

Раскрывающиеся блоки довольно популярное решение, если необходимо сэкономить место или, когда контент разделен на группы, и какая-то его часть может быть не интересна ряду пользователей сайта.

Как быстро найти и скачать нужные драйвера

18 июля 2014 ti1schweiger

Совсем недавно столкнулся с проблемой: найти и скачать драйвера для ноутбука HP. Модель была относительно новая с предустановленной восьмеркой, после сноса её и установки Windows 7 добрый десяток устройств отказались адекватно работать из-за отсутствия необходимых драйверов.

Эффект дождя на JavaScript

2 января 2015 Антон Кулешов

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