HINT.css — всплывающие подсказки средствами CSS

    Что


    Hint.css — библиотека, реализующая всплывающие подсказки, средствами CSS3 без применения JavaScript.

    Библиотека использует атрибут data-*, псевдоэлементы, свойство content и CSS3 transitions для вывода всплывающих подсказок.

    Разработчики библиотеки напоминают, что CSS3 transitions для псевдоэлементов работают пока только в браузере Firefox, но в скором времени будут доступны и в webkit.

    Как


    1. Скачать и подключить библиотеку.
    2. В атрибуте data-hint элементов прописать текст подсказки.
    3. Указать класс hint для элементов.
    4. Указать положение всплывающей подсказки с помощью одного из следующих классов:
    • hint--top
    • hint--right
    • hint--bottom
    • hint--left

    По умолчанию выводится всплывающая подсказка чёрного цвета. Чтобы изменить цвет, к элементу добавляется один из следующих классов:
    • hint--error — красный
    • hint--info — коричневый
    • hint--warning — синий
    • hint--success — зелёный

    Чтобы подсказка отображалась всегда, а не только при наведении курсора, используется класс hint--always.

    Почему


    Просто, быстро, красиво и всего 4Кб в минимальной версии.

    UPD 1:
    CSS3 transitions для псевдоэлементов уже доступны в IE10 (спасибо roman01la), Opera (проверялось на версии 12.02, спасибо loingrim)

    UPD 2:
    Не поддерживаются следующие браузеры:
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 32

      +2
      Разработчики библиотеки напоминают, что CSS3 transitions для псевдоэлементов работают пока только в браузере Firefox, но в скором времени будут доступны и в webkit.
      Похоже они уже доступны…
        0
        Судя по трекеру — да, но проверяю в своих Chrome и Safari (на всякий случай обновил до последних версий) и CSS3 transitions не видно. В Firefox всё работает.
          0
          В Chrome точно работает (как минимум под win версией) — как тултипы тут, так и пример transitions'ов тут. Вероятно вы просто ещё не обновились по какой-то причине. Насчёт Safari же ничего не скажу…
            0
            Спасибо, добавлено примечание к топику.
              0
              Да не за что :)
              А в целом — простовато, но достаточно недурно, если вам не нужны лишние навороты.
              +1
              Transitions для псевдо-элементов не работают в стабильной версии Chrome, только в 26.
                0
                У меня:
                Версия 24.0.1312.57 m
                Всё работает, так что даже не знаю…
                  0
                  trac.webkit.org/changeset/138632
                  css-tricks.com/transitions-and-animations-on-css-generated-content
                  Ни в Windows, ни в OS X у меня не работает transition для псевод-элементов.
                    0
                    Версия Chrome:
                    s2.hostingkartinok.com/uploads/images/2013/02/c19c4ee991aa05f7f7f2db0bf1652b02.png

                    Скрины из примеров, которые приводил выше:
                    s2.hostingkartinok.com/uploads/images/2013/02/1a4667c33c21807d0affea51ae3ae5ee.png
                    s2.hostingkartinok.com/uploads/images/2013/02/b73ffcae1d97e8807f82ed738a663fc9.png

                    Проверил также на маке и паре других виндовых машин — всё работает.
                    Никаких подписок на бета-версии Chrome, бета-фичи или что-то подобное вроде как нет.

                    Работает всё 1 в 1 как в последней версии FF.
                      0
                      1. Скрины статичны, а transition отвечает за «плавность перехода», задавая время совершения перехода, временную функцию и свойство CSS (либо all по умолчанию). Проще говоря, тултипы должны не просто появляться, а делать это плавно. Если вы знаете, что делает transition, то я извиняюсь, но вы показывате работу анимации с помощью статичных изображений, а это может говорить о том, что не знаете.
                      2. Пример с сайта W3 Schools тут не при чем, transition не работает в Chrome для псевдо-элементов (в случае hint.css это ::after и ::before), а на W3 Schools transition применяется для обычного элемента.
                        0
                        С примерном с W3 Schools я действительно ошибся, признаю — поспешил взять первое найденное. Насчёт изображений — согласен, не лучший пример — на них толком не видно ничего, но, честно говоря, никакого смысла снимать видео ради доказательства наличия плавной анимации я не вижу.

                        И, как я уже писал выше — на сайте с примерами тултипов они одинаково плавно появляются как в FF, так и в моём «устаревшем» Chrome. Соответственно имеет смысл полагать, что transition таки работает на этой версии по каким-то причинам.
          0
          Разработчики библиотеки напоминают, что CSS3 transitions для псевдоэлементов работают пока только в браузере Firefox, но в скором времени будут доступны и в webkit.

          CSS3 transitions для псевдоэлементов уже доступны в webkit-браузерах


          А также в IE10
            0
            Спасибо. Обновлено примечание к топику.
          • UFO just landed and posted this here
            • UFO just landed and posted this here
                0
                Библиотека разработана не мной. Про технологию вкратце рассказано в самом начале топика в разделе «Что».
              0
              Нельзя скопировать текст мышью внутри балона.
                0
                Ума не приложу, с какой целью кому-нибудь понадобится копировать подсказку. Это всего-лишь подсказка, как title="".
                • UFO just landed and posted this here
                    0
                    Такая продвинутая бабушка сможет и скриншот связать :) А вообще, вы себе это представляете?
                0
                Opera 12.13 — полёт нормальный
                  0
                  Похоже, в более ранних тоже работает. Проверил 12.02.
                  0
                  смущает вот это
                  .hint--left::after { margin-bottom: -14px; }

                  это значит тултипы работают для определенного размера шрифта, и только одна строка. плюс нельзя html пихать в него.
                  • UFO just landed and posted this here
                  • UFO just landed and posted this here
                      +1
                      Задержку наверное можно похакать через cubic-bezier.
                      Или не хакать, а решить нормально с помощью transition-delay. Или я чего-то не понял?
                      • UFO just landed and posted this here
                          0
                          Не знаю. :(
                      0
                      Надо всегда писать поддерживаемые браузеры.
                      IE9 — работает, IE8 — нет.
                        0
                        Спасибо. Добавлено, как примечание к топику.
                      • UFO just landed and posted this here
                        • UFO just landed and posted this here

                        Only users with full accounts can post comments. Log in, please.