Показать Меню
falbar Всплывающие подсказки

Всплывающие подсказки на чистом CSS

Всплывающие подсказки

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

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

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

Цель всего вышеизложенного заключалась в СЕО-оптимизации данной статьи (хотя я и писал то, что реально думаю), чтобы Вы – читатели фалбар, смогли когда-либо отыскать данную статью на страницах яндекса или гугла, теперь же приступим к технической реализации наших всплывающих подсказок. Для этого создаем следующую HTML структуру:

<a href="#" class="tooltip">
	Текст
	<span>Подсказка</span>
</a>

В ссылку помещаем нужный нам фрагмент текста, при наведении на который, мы хотим увидеть подсказку, сама же подсказка у нас будет спрятана в теге span. К слову: я выбрал данные теги потому, что мне так привычнее создавать структуру страницы, Вы же спокойно можете использовать любые другие теги, главное – правильно селектировать ниже указанные стили CSS.

.tooltip{
	position: relative; /* позиционируем */
	display: inline-block;
	background: #eaeaea;
	color: #222;
	text-decoration: none;
	cursor: help;
	outline: none;
}
.tooltip span{
	position: absolute; /* позиционируем */
	z-index: 999; /* выдвигаем на передний план */
	visibility: hidden; /* временно скрываем */
	left: 50%;
	bottom: 30px;
	width: 230px;
	padding: 10px;
	margin-left: -127px;
	border: 2px solid #ccc;
	background-color: #ddd; 
	background-image: -moz-linear-gradient(top,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background-image: -o-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background-image: -ms-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
	background-image: linear-gradient(to bottom,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* W3C */
	opacity: .9;
	border-radius: 4px;
	-moz-border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
	text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

Нашему тегу-обертке с классом .tooltip задаем position: relative, а внутреннему тегу position: absolute для того, чтобы разместить её относительно родительского элемента. z-index-ом выдвигаем её на передний план страницы и скрываем до надобности visibility: hidden. Все остальные стили – это ваше дизайнерское оформление.

Далее простая механика: меняем свойство visibility у дочернего элемента с hidden на visible, при наведении курсора на элемент с классом .tooltip.

.tooltip:hover{
	border: 0; /* используем если необходим IE6 fix */
}
.tooltip:hover span{
	visibility: visible; /* отображаем подсказку */
}

Не забываем про главную нашу красивость – стрелочку-указатель, причем, её реализовываем без использования каких-либо картинок, что, согласитесь очень удобно, особенно если в будущем нам придется корректировать дизайн страницы. Для этого применяем псевдо-селекторы before и after, которые и будут отрисовывать стрелочку. Не забываем их с позиционировать и выдвинуть на 1 выше основного блока (свойство z-index), чтобы перекрыть его бордер.

Стрелочка-указатель

.tooltip span:before,
.tooltip span:after{
	content: ""; /* во избежание коллапса */
	position: absolute; /* позиционируем */
	z-index: 1000; /* на 1 больше */
	bottom: -7px;
	left: 50%;
	margin-left: -8px;
	border-top: 8px solid #ddd;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 0;
}
.tooltip span:before{
	border-top-color: #ccc;
	bottom: -8px;
}

Вот и всё, подсказка готова. Осталось только помесить её в нужные места сайта. Если хотим использовать несколько подсказок с разными стилями, то лучшим вариантом будет добавить к .toolip ещё один класс, где переопределить необходимые стили.

<a href="#" class="tooltip green-tooltip">
	...
</a>

И добавляем CSS:

.green-tooltip span{
	color: #fff;
	border-color: #228b22;
	background-color: #008000;
}
.green-tooltip span:after{
	border-top-color: #008000;
}
.green-tooltip span:before{
	border-top-color: #228b22;
}

Изучаем демо, скачиваем исходники, пользуемся!

Источник
red-team-design.com

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

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