Показать Меню
falbar Всплывающие подсказки Hint

Всплывающие подсказки на CSS

Всплывающие подсказки Hint

После вынужденного отсутствия я вернулся к привычному распорядку дня и сегодня продолжу пополнять коллекцию Фалбара новыми решениями. Тема статьи не раз уже рассматривалась на сайте – всплывающие подсказки, но библиотека, о которой пойдет речь, возможно, наилучшим образом подойдет для вашего проекта, так как не использует сторонних скриптов, написанных на JavaScipt или jQuery, а только HTML и CSS.

Другие варианты всплывающих подсказок можно посмотреть здесь - tooltips. Наша же цель рассмотреть CSS библиотеку Hint. Первое, что хочется отметить – размер CSS файла, он очень мал и при этом обладает определённым набором настроек. Если залезть в сам файл и убрать лишние строки, то его ещё больше можно оптимизировать, так как довольно редко на сайте используются разные виды оформления всплывающих подсказок.

Для работы нам потребуется подключить всего один файл стилей:

<link href="hint.min.css" type="text/css" rel="stylesheet" />

Управление всплывающими подсказками происходит при помощи добавления к элементу атрибута data-hint="текст подсказки" и классов:

  • hint--top, hint--right, hint--bottom, hint--left – с какой стороны показывать подсказку при наведении на элемент;
  • hint--error, hint--info, hint--warning, hint--success – подсказки в соответствующем стиле;
  • hint--always – показывать подсказку всегда;
  • hint--rounded – подсказка с скруглёнными углами;
  • hint--no-animate – отключение анимации;
  • hint--bounce – добавление анимации bounce.

Все эти классы можно комбинировать, получая нужный результат, на этом я завершу статью, надеюсь, данный способ добавления подсказок окажется Вам полезен.

Источник
github.com

Подписаться на обновления

Комментариев еще не оставлено