28 декабря 2015
.
Антон Кулешов
Всплывающие подсказки на CSS
После вынужденного отсутствия я вернулся к привычному распорядку дня и сегодня продолжу пополнять коллекцию falbar новыми решениями. Тема статьи не раз уже рассматривалась на сайте – всплывающие подсказки, но библиотека, о которой пойдет речь, возможно, наилучшим образом подойдет для вашего проекта, так как не использует сторонних скриптов, написанных на JavaScipt или jQuery, а только HTML и CSS.
Первое, что хочется отметить – размер 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.
Все эти классы можно комбинировать, получая нужный результат, на этом я завершу статью, надеюсь, данный способ добавления всплывающий подсказок CSS окажется вам полезен.
