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

28 декабря 2015 Антон Кулешов 1234 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 плагин - эффект текста по дуге

16 декабря 2014 Антон Кулешов

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

Интегралы больше не проблема

5 января 2016 Антон Кулешов

Математика и все, что связано с ней, не очень популярная тема в рунете. Если за рубежом профессора и преподаватели ещё ведут свои блоги, есть весьма интересные сайты университетов, то у нас все остановилось на банальном распространении курсовых и контрольных. Однако, креативным людям увлекающимся матаном и понимающим в сайтостроении, сегодняшняя статья будет не безынтересна. А затронем мы в ней вывод формул в браузер, на заметку студентам – полноценный сайт, подготовленный к дипломному проекту с парой-тройкой коментов, будет выглядеть на защите просто убийственно, по сравнению с приевшимися презентациями в PowerPoint.

Слайд-шоу на заднем фоне сайта

11 ноября 2015 Антон Кулешов

В сегодняшней статье мы поговорим о фоновом изображении для сайта, которое является немаловажным элементом дизайна. Если для блога фон должен быть приятным и не отвлекать от основного контента, то для лэндинг пэйдж – фон фактически самый значимый элемент, благодаря которому создается общее впечатление, и он должен «цеплять» посетителя.