4 февраля 2013

HINT.css — всплывающие подсказки средствами 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:
Не поддерживаются следующие браузеры:
Теги:css3css3 transitionhintsвсплывающие подсказки
Хабы: Разработка веб-сайтов CSS
+31
30,1k 501
Комментарии 32
Похожие публикации
Основы HTML и CSS
30 ноября 2020БесплатноНетология
Разработка приложений на Kotlin
2 декабря 202020 900 ₽Нетология
Vue.js Продвинутая веб-разработка
11 января 202127 000 ₽Loftschool
Веб-дизайн
25 января 202115 000 ₽Loftschool
▇▅▄▅▅▄ ▇▄▅