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

8 июня 2016 Антон Кулешов 1320 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
Читайте далее

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

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

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

Эффект дождя на JavaScript

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

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

Как сделать вкладки-табы для сайта на jQuery

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

В сегодняшней статье давайте рассмотрим, как сделать простой вариант вкладок для сайта на jQuery. Данная реализация подойдет там, где необходимо установить простенькие табы, на дополнительных эффектах визуализации останавливаться не будем.