Всплывающие подсказки с помощью 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
Недостатки
Методика не лишена и недостатков:
- Когда вы задерживает курсор на какое-то время, то можете заметить, что кроме сгенерированной с помощью CSS3 подсказки, поверх нее появляется стандартная подсказка, обрабатываемая браузером. Судя по всему, пока еще нет способа, чтобы устранить этот недостаток.
- Необходимо учитывать длину текста подсказки, чтобы задать правильную ширину.
- Также нужно учитывать, что высота создаваемой подсказки должна быть не больше высоты элемента, к которому она применяется, иначе подсказка сдвинет элементы, находящиеся ниже.
- Если применять методику к ссылке, то текст подсказки принимает параметры ссылки,
т. е. придется использовать дополнительные стили, чтобы привести подсказку к нужному виду.
Источник — Tooltips with CSS3
* * *
В последнее время очень популярны и используются даже не дизайнерами (т.е. обычными пользователями) кисти для фотошопа. На сайте minotawr.ru представлена большая коллекция бесплатных красивых кистей для Photoshop, и она постоянно обновляется.
Комментарии (21)
Спасибо автору за статью!