Tooltips на чистом CSS

Предоставление дополнительной информации о потенциально сложных элементах пользовательского интерфейса является важной частью любого веб-сайта.

Всю статью решил не переводить, напишу от себя :)
Демо можно глянуть тут: Демо

Скачать исходники:
css-tooltips.zip [18,83 Kb] (cкачиваний: 18)

Инструкция по использованию.
В хтмл используем следующую конструкцию:
Это для "классического" вывода

<a class="tooltip" href="#">текст<span class="classic">Текст, который будет в всплывающей подсказке.</span></a>


Это для остальных
<a class="tooltip" href="#">текст<span class="custom стиль подсказки"><img src="картинка стиля" height="48" width="48" />Текст, который будет в всплывающей подсказке.</span></a>



Стиль подсказки может быть следующим:
classic, critical, help, info, warning

Tooltips на чистом CSS

И различаются они этим:
		
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334;	}
.help { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.info { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }


Обязательные CSS стили:
		.tooltip {
			border-bottom: 1px dotted #000000; color: #000000; outline: none;
			cursor: help; text-decoration: none;
			position: relative;
		}
		.tooltip span {
			margin-left: -999em;
			position: absolute;
		}
		.tooltip:hover span {
			border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
			box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
			font-family: Calibri, Tahoma, Geneva, sans-serif;
			position: absolute; left: 1em; top: 2em; z-index: 99;
			margin-left: 0; width: 250px;
		}
		.tooltip:hover img {
			border: 0; margin: -10px 0 0 -55px;
			float: left; position: absolute;
		}
		.tooltip:hover em {
			font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
			display: block; padding: 0.2em 0 0.6em 0;
		}
		.classic { padding: 0.8em 1em; }
		.custom { padding: 0.5em 0.8em 0.8em 2em; }


В исходниках нет ничего лишнего, всё должно быть понятно.


Добавить комментарий

0 Комментариев

Добавление комментария

Я бы хотел услышать Ваши мысли. Не стесняйтесь оставить свой комментарий и присоединиться к беседе!

2+2*2
Введите код: * Кликните на изображение чтобы обновить код, если он неразборчив