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

В этой статье рассматривается новый способ создания всплывающих подсказок к HTML-элементам с применением технологии CSS3.

До сих пор существуют несколько вариантов создания всплывающих подсказок: уродливые методы, основанные на Javascript, или решения, использующие пустой тег ссылки (для совместимости с IE6). Еще один вариант заключается в том, чтобы вообще игнорировать IE6 и использовать псевдо-класс :hover в сочетании с родительским элементом, который содержит текст подсказки.

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

Естественно, данное решение не будет работать в браузерах, не поддерживающих каскадные таблицы стилей 3-й версии.

Поддерживаемые браузеры

Поддерживаются все современные браузеры, кроме IE по 7-ю версию включительно:

• Internet Explorer, начиная с 8-й версии
• Opera 7−9.5
• Firefox 1−3
• Safari 1−3

HTML-код

<div title="Всплывающая подсказка"></div>

CSS-код

Если в нескольких словах, то результат по данной методике достигается за счет использования псевдо-элемента :before (или :after) и свойства content в сочетании с псевдо-классом :hover.

Прежде всего, перехватываем значение атрибута title, используя свойство content, и с помощью display:none делаем его невидимым (иначе подсказка отобразится на странице):

div:before{
	content: attr(title);
	display: none;
}

Теперь скомбинируем псевдо-класс :hover и псевдо-элемент :before, чтобы определить свойства для генерируемой подсказки:

div:hover::before{
	width: 200px;
	display: block;
	background: yellow;
	border: 1px solid black;
	padding: 8px;
	margin: 25px 0 0 10px;
}

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

div:hover{
	z-index: 10;
	position: relative;
}

Пример

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

Недостатки

Методика не лишена и недостатков:

1. Когда вы задерживает курсор на какое-то время, то можете заметить, что кроме сгенерированной с помощью CSS3 подсказки, поверх нее появляется стандартная подсказка, обрабатываемая браузером. Судя по всему, пока еще нет способа, чтобы устранить этот недостаток.
2. Необходимо учитывать длину текста подсказки, чтобы задать правильную ширину.
3. Также нужно учитывать, что высота создаваемой подсказки должна быть не больше высоты элемента, к которому она применяется, иначе подсказка сдвинет элементы, находящиеся ниже.
4. Если применять методику к ссылке, то текст подсказки принимает параметры ссылки, т. е. придется использовать дополнительные стили, чтобы привести подсказку к нужному виду.

Источник — Tooltips with CSS3

* * *

В последнее время очень популярны и используются даже не дизайнерами (т.е. обычными пользователями) кисти для фотошопа. На сайте minotawr.ru представлена большая коллекция бесплатных красивых кистей для Photoshop, и она постоянно обновляется.