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

8 июня 2016 Антон Кулешов 1326 0

Приветствую, друзья! Недавно работал над одним сайтом и в коде увидел очень интересную CSS библиотечку для добавления всплывающих подсказок. Решений на эту тему есть уже масса, и я неоднократно добавлял к себе на сайт разные варианты, но увидев balloon решил о нём написать.

Реклама

Конечно, намного практичнее выбрать одну библиотеку, подогнать её «под себя» и пользоваться ею уже повсеместно, но когда у тебя в руках «колода карт» из решений не хуже, то всегда можно подобрать самое подходящее для каждого конкретного проекта. Если вы успели глянуть примеры, то заметили, насколько все хорошо работает, я же в этой статье рассмотрю один вариант. Как и всегда нам нужно вначале подключить стили всплывающих подсказок balloon:

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

Далее предлагаю добавить ещё строку для возможности работать с иконками Font Awesome:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />

И в конце добавим кнопку:

<button class="fa" data-balloon="Font Awesome: &#xf030; &#xf133; &#xf1fc; &#xf03e; &#xf1f8;" data-balloon-pos="up">Hover me!</button>
  • data-balloon – как уже стало понятно, сюда будет вводиться сообщение всплывающей подсказки;
  • data-balloon-pos – указывает место размещения (up, down, left и right).

Настроек не так уж много, но в большинстве случаев много и не нужно. Я думаю это хороший инструмент, который должен быть припасён на «всякий» случай.

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

Простой визуальный редактор как на Хабрахабр

30 сентября 2014 Антон Кулешов

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

Ленивая загрузка картинок, используя jQuery

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

Важной частью работы любого сайта является скорость его загрузки у пользователя в браузере. Тут правило одно - чем быстрее, тем лучше. Оптимизировать проект не всегда возможно, и тут к нам на выручку приходят некоторые хитрости. Сегодня мы поговорим о «ленивой загрузке» картинок на сайте, и использовать будем jQuery плагин lazy load.

Перенаправление пользователя при помощи HTML

24 ноября 2014 Антон Кулешов

Если вам потребуется перенаправить пользователя на другую страницу или просто перезагрузить её, то наиболее простым способом будет воспользоваться мета тегом refresh.