Web. Hint.css — библиотека для легкого создания подсказок

Достаточно часто в заказах меня просят реализовать тот или иной функционал подсказок, всплывающих при наведении на различные элементы. И каждый раз я натыкался на одни и те же костыли, изобретая собственный велосипед, состоящий из CSS и JS библиотек. Но не так давно наткнулся на описание одной очень маленькой, юркой и простой CSS библиотеки для создания подсказок, имя которой Hint.css.
Итак, представляю Вам, и записываю для себя эту чудо-библиотеку Hint.css

Для использования требуется всего лишь ее подключить, написав в <head> следующую строчку:

<link rel="stylesheet" href="hint.css">

Библиотека позволяет выводить подсказки в следующих позициях:

  • bottom
  • top
  • left
  • right
  • bottom-right
  • top-right
  • bottom-left
  • top-left

Для самого вывода подсказки в нужный элемент следует добавить следующий код (на примере элемента H1):

<h1 class="hint--top" data-hint="Подсказка для H1">Пример элемента H1 с подсказкой</h1>

Где:

  • class=»hint—top» — позиция для показа подсказки
  • data-hint=»Подсказка для H1″ — сама подсказка

Так же можно указать ширину подсказки, использовав один из следующих классов:

  • Узкий — hint—small;
  • Средний — hint—medium;
  • Широкий — hint—large.

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

  • Ошибка — hint—error
  • Предупреждение — hint—warning
  • Информационный — hint—info
  • Подтверждение — hint—success

Для того, что бы сделать подсказку видимой постоянно используйте класс: hint—always

Данная библиотека поддерживает управление анимацией для появления подсказки:

  • Отключить анимацию — hint—no-animate
  • Стандартное «выталкивание» — hint—bounce

Всю более подробную информацию можно найти на сайте разработчика библиотеки Hint Kushagra Gour

You may also like...