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

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

Комментарии (21)
  1. 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. 2

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

  3. 3

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

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

  4. 4

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

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

  5. 5
    ACID Jesus

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

  6. 6
    Взлом-щик

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

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

  7. 7

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

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

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

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

  8. 8
    Jeki

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

  9. 9

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

  10. 10

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

  11. 11
    Александр

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

  12. 12

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

  13. 14
    ShaD

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

    Удачи ;)

  14. 15
    haZe

    убило

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

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

  15. 16

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

  16. 17
    Nick

    content: attr(alt);

    и

    position:absolute;

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

  17. 18
    Kot

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

  18. 19
    Denai

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

  19. 20
    Игорь

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