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

28 декабря 2015 Антон Кулешов 1207 0

После вынужденного отсутствия я вернулся к привычному распорядку дня и сегодня продолжу пополнять коллекцию 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.

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Создаем раскрывающиеся блоки тремя способами, используя jQuery, classList API и JavaScript

17 января 2015 Антон Кулешов

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

Как прижать футер к низу страницы

25 июля 2014 Антон Кулешов

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

Аккордеон меню на CSS

20 апреля 2015 Антон Кулешов

Аккордеон меню – лучший вариант решения вертикального меню для сайта, он идеально подойдет для страниц с обширной навигацией. Главное достоинство аккордеон меню в том, что оно очень компактно, при условии того, что внутренних вкладок может быть очень много. С точки зрения пользователя, вертикальное меню намного удобнее горизонтального, т.к. физиологически человеческая кисть устроена так, что нам проще проводить мышью вертикальные, а не горизонтальные линии. Используя аккордеон меню, мы заботимся и о наших пользователях, и украшаем наш сайт динамическими эффектами, делая его ярче и привлекательнее.