Приветствую, друзья! Недавно работал над одним сайтом и в коде увидел очень интересную 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:     " data-balloon-pos="up">Hover me!</button>
- data-balloon – как уже стало понятно, сюда будет вводиться сообщение всплывающей подсказки;
- data-balloon-pos – указывает место размещения (up, down, left и right).
Настроек не так уж много, но в большинстве случаев много и не нужно. Я думаю это хороший инструмент, который должен быть припасён на «всякий» случай.