Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Красивая всплывающая подсказка Категория: 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
Красивая всплывающая подсказка на CSS

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

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:
Гость  •  2012-04-16 09:47:45
не плохо:)
Но, у меня есть маленькое предложение:
Хорошо бы еще и скрины вставлять с готовым результатом, чтобы пользователь сразу видел, что получается. Начинающие сразу не смогут четко представлять что они увидят, прочитав только код.
Андрей  •  2012-04-16 10:31:17
Отличная мысль, добавлю их к этой и другим статьям. Большое спасибо за рекомендацию.
Гость  •  2012-04-19 19:43:47
всегда рад помочь добрым людям :)