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Кб в минимальной версии.

ссылка на оригинал статьи http://habrahabr.ru/post/168273/

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *