• Главная
• Статьи
• Учебники
• Шпаргалки
• Программы
• Контакты

	Категория: CSS
	Название: Красивая всплывающая подсказка
	Дата добавления: 15-04-2012
	Раз просмотрено: 1186
	Комментарии: 3
	Рейтинг: (1 голос)

Красивая всплывающая подсказка

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

Нужны ли всплывающие подсказки?

HTML атрибут title — это стандартное средство добавления дополнительной информации. Но эта стандартная всплывающая подсказка никак не может быть украшена. Ее внешний вид зависит от браузера и операционной системы, которую использует пользователь. Если вам нужна особенная всплывающая подсказка, подходящая для дизайна вашего сайта, и выделяющая ваше творение, то лучшего решения чем особенная всплывающая подсказка на CSS3, вы не найдете. Для ее создания мы будем использовать CSS градиенты, тени и псевдо-элементы.

HTML

В начале, мы создадим простую разметку для нашей будущей подсказки:

<a href="#" class="tooltip">Ваш текст<span>Текст всплывающей подсказки</span></a>

Теперь разберем разметку немного подробнее. Якорь в ссылке, в принципе, необязателен. Но у браузера Internet Explorer 6 есть проблемы с работой с псевдо-классом :hover с отличным от якоря элементом. Поэтому использование href="#" делает нашу подсказку кроссбраузерной, даже для таких проблематичных браузеров.

CSS

Теперь добавляем эти стили к странице:

.tooltip {
	position: relative;
	background: #eaeaea;
	cursor: help;
	display: inline-block;
	text-decoration: none;
	color: #222;
	outline: none;
}

.tooltip span {
	visibility: hidden;
	position: absolute;
	bottom: 30px;
	left: 50%;
	z-index: 999;
	width: 230px;
	margin-left: -127px;
	padding: 10px;
	border: 2px solid #ccc;
	opacity: .9;
	background-color: #ddd;
	background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	-moz-border-radius: 4px;
	border-radius: 4px;
	-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;
	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:hover {
	/* Поправка для IE6 */
	border: 0;
}

.tooltip:hover span {
	visibility: visible;
}

.tooltip span:before, .tooltip span:after {
	content: ""
	position: absolute;
	z-index: 1000;
	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;
}

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

Красивая всплывающая подсказка на CSS

Это интересно: «Как уменьшить трафик и нагрузку на сервер».