Всплывающие подсказки с помощью 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-код
1 | <div title="Всплывающая подсказка"></div> |
CSS-код
Если в нескольких словах, то результат по данной методике достигается за счет использования псевдо-элемента :before (или :after) и свойства content в сочетании с псевдо-классом :hover.
Прежде всего, перехватываем значение атрибута title, используя свойство content, и с помощью display:none делаем его невидимым (иначе подсказка отобразится на странице):
1 2 3 4 | div:before{ content: attr(title); display: none; } |
Теперь скомбинируем псевдо-класс :hover и псевдо-элемент :before, чтобы определить свойства для генерируемой подсказки:
1 2 3 4 5 6 7 8 | div:hover::before{ width: 200px; display: block; background: yellow; border: 1px solid black; padding: 8px; margin: 25px 0 0 10px; } |
Примечание: если использовать данный метод для двух находящихся рядом плавающих элементов, то при наведении курсора всплывающая подсказка уходит под смежный элемент. Чтобы избежать этого, необходимо задать позиционирование и уровень слоя к этим элементам в момент наведения курсора:
1 2 3 4 | div:hover{ z-index: 10; position: relative; } |
Пример
Всплывающие подсказки с помощью CSS3
Недостатки
Методика не лишена и недостатков:
- Когда вы задерживает курсор на какое-то время, то можете заметить, что кроме сгенерированной с помощью CSS3 подсказки, поверх нее появляется стандартная подсказка, обрабатываемая браузером. Судя по всему, пока еще нет способа, чтобы устранить этот недостаток.
- Необходимо учитывать длину текста подсказки, чтобы задать правильную ширину.
- Также нужно учитывать, что высота создаваемой подсказки должна быть не больше высоты элемента, к которому она применяется, иначе подсказка сдвинет элементы, находящиеся ниже.
- Если применять методику к ссылке, то текст подсказки принимает параметры ссылки, т.е. придется использовать дополнительные стили, чтобы привести подсказку к нужному виду.
Источник - Tooltips with CSS3
It would be nice if you attributed your posts a bit better, the small VIA link doesn’t cut it. So: please attribute better, or remove the post entirely.
Joost de Valk, no problem. Link name changed. Thanks for article.
то, что “браузерный” атрибут title выводиться поверх того, что “сдизайнерен” - во первых,
и то, что ишак (мерзкий, поганый, вонючий ишак!!!) не поддерживает описанную методику, делает область применения подобной технологии не просто сомнительной, но стремящейся к нулю и почти достигшей цели :(((
да и вообще - как то странно - спецификация CSS3 есть, а реальных способов отключить вывод title при обработке страницы браузером - нет…
из самых больших минусов - нет возможности вставить теги, даже банальный перенос строки
а ещё fade opacity, для него всё равно придётся применять js
Конечно то что по спецификации это хорошо… но минусы перекрывают всякую возможность применения этого подхода 8-)
Спасибо, ты как всегда весьма кстати написал этот пост - только сегодня думал чтобы такое замутить чтобы к обчному тексту можно было всплывающую подсказку сделать…
P.S.: Сколько уже читаю блог, а только седня заметил считалку в правом нижнем углу :)
P.P.S.: Туземцы еще и тут как то умудряются найти переведенное…
Она перенесена туда совсем недавно.
Все просто. Статья содержит ссылку на оригинал, и в момент публикации к нему был отправлен пинг, поэтому и автор сразу узнал об этом (в комментах оригинала можешь увидеть инфу с моего блога).
На мой взгляд этот минус уж очень велик
То факт что следом за форматированной подсказкой всплывает еще и стандартная, уродует весь метод на корне. Но CSS 3 однозначно велик, могуч и… сыр :(
Так что продолжаем юзать уродливые js :)
Зайдите на мой inlive.us и посмотрите как реализованы всплывающие подсказки у меня ;)
Работает во всех браузерах + не выводит на верх стандартную подсказку.
Списибо! Отличная статья! Но у меня в Опере 9.26 подсказка так и не появилась…
Весьма сомнительный метод. Лично я - как кодер со стажем его еще никогда не использовал и вероятнее всего использовать не буду, поскольку есть масса иных вариантов, - тот же jquery (хттп://jquery.bassistance{.}de/tooltip/demo/) или BoxOver (хттп://boxover.swazz{.}org/example.html).
Удачи ;)
убило
обосрали отличную технологию предложили страшную срань.
Автору дизреспект!
можно намного проще и чтобы во всех браузерах работало, делается довольно просто пример и сам код можно посмотреть вот здесь http://neoprizma.net/2009/08/07/alt/
content: attr(alt);
и
position:absolute;
И уже ничего не замещается… ПРобуйте
Почему автор не додумался перехватывать не title а любой другой параметр? спокойно можно использовать, например, id, и будет вам счастье)))) (правда если он не занят)
Почти бесполезно, т.к. нельзя даже картинку вставить, не подскажете css-средства, понимающего картинки?