Показать Меню
falbar Всплывающие подсказки Balloon CSS

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

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

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

Конечно, намного практичнее выбрать одну библиотеку, подогнать её «под себя» и пользоваться ею уже повсеместно, но когда у тебя в руках «колода карт» из решений не хуже, то всегда можно подобрать самое подходящее для каждого конкретного проекта. Если Вы успели глянуть примеры, то заметили, насколько все хорошо работает, я же в этой статье рассмотрю один вариант. Как и всегда нам нужно вначале подключить стили всплывающих подсказок 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).

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

Источник
github.com

Подписаться на обновления

Комментариев еще не оставлено