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

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

Комментарии (21)

  1. 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.

  2. Joost de Valk, no problem. Link name changed. Thanks for article.

  3. то, что «браузерный» атрибут title выводиться поверх того, что «сдизайнерен» — во первых,
    и то, что ишак (мерзкий, поганый, вонючий ишак!!!) не поддерживает описанную методику, делает область применения подобной технологии не просто сомнительной, но стремящейся к нулю и почти достигшей цели :(((

    да и вообще — как то странно — спецификация CSS3 есть, а реальных способов отключить вывод title при обработке страницы браузером — нет…

  4. из самых больших минусов — нет возможности вставить теги, даже банальный перенос строки

    а ещё fade opacity, для него всё равно придётся применять js

  5. Конечно то что по спецификации это хорошо… но минусы перекрывают всякую возможность применения этого подхода 8-)

  6. Спасибо, ты как всегда весьма кстати написал этот пост — только сегодня думал чтобы такое замутить чтобы к обчному тексту можно было всплывающую подсказку сделать…

    P.S.: Сколько уже читаю блог, а только седня заметил считалку в правом нижнем углу :)
    P.P.S.: Туземцы еще и тут как то умудряются найти переведенное…

  7. Сколько уже читаю блог, а только седня заметил считалку в правом нижнем углу :)

    Она перенесена туда совсем недавно.

    Туземцы еще и тут как то умудряются найти переведенное…

    Все просто. Статья содержит ссылку на оригинал, и в момент публикации к нему был отправлен пинг, поэтому и автор сразу узнал об этом (в комментах оригинала можешь увидеть инфу с моего блога).

  8. На мой взгляд этот минус уж очень велик

  9. То факт что следом за форматированной подсказкой всплывает еще и стандартная, уродует весь метод на корне. Но CSS 3 однозначно велик, могуч и… сыр :(

  10. Так что продолжаем юзать уродливые js :)

  11. Зайдите на мой inlive.us и посмотрите как реализованы всплывающие подсказки у меня ;)
    Работает во всех браузерах + не выводит на верх стандартную подсказку.

  12. Списибо! Отличная статья! Но у меня в Опере 9.26 подсказка так и не появилась…

  13. Денис Болтиков. Блог о разработке крупных проектов, стартапах, блогосфере, интернет-маркетингу.
    11 лет 6 месяцев назад

    COUNT(*) для таблиц InnoDB — перевод с MySQL Performance Blog…

    Меня давно интересовало, что за откровения таятся в блоге Петра Зайцева и Вадима Ткаченко посвященному оптимизации работы с MySQL. Сложнос….

  14. Весьма сомнительный метод. Лично я — как кодер со стажем его еще никогда не использовал и вероятнее всего использовать не буду, поскольку есть масса иных вариантов, — тот же jquery (хттп://jquery.bassistance{.}de/tooltip/demo/) или BoxOver (хттп://boxover.swazz{.}org/example.html).

    Удачи ;)

  15. убило

    уродливые методы, основанные на Javascript

    обосрали отличную технологию предложили страшную срань.
    Автору дизреспект!

  16. можно намного проще и чтобы во всех браузерах работало, делается довольно просто пример и сам код можно посмотреть вот здесь http://neoprizma.net/2009/08/07/alt/

  17. content: attr(alt);

    и

    position:absolute;

    И уже ничего не замещается… ПРобуйте

  18. Почему автор не додумался перехватывать не title а любой другой параметр? спокойно можно использовать, например, id, и будет вам счастье)))) (правда если он не занят)

  19. Почти бесполезно, т.к. нельзя даже картинку вставить, не подскажете css-средства, понимающего картинки?

  20. Здравствуйте, а как сделать всплывающую подсказку как на сайте http://share42.com/ ?