Что
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:
CSS3 transitions для псевдоэлементов уже доступны в webkit-браузерах