О сайтеПравилаКонтакты
  • Крипто
  • Новости
  • Статьи
  • Люди
  • Теги
» Статьи » Разработка » Всплывающие подсказки balloon CSS
  • Инструменты
  • Заработок
  • Раскрутка
08 июня 2016 . Антон Кулешов

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

Приветствую, друзья! Недавно работал над одним сайтом и в коде увидел очень интересную 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).

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

#Всплывающие подсказки
7 918
Антон Кулешов
Всплывающие окна alertify Как сделать всплывающие подсказки, разбираемся с WebUI Popover Реализуем всплывающие сообщения без использования JavaScript Всплывающие подсказки на CSS Всплывающая подсказка с HTML кодом
Комментарии не найдены

Глитч текста

Смена изображений CSS3 слайдер

Популярное
1 Пишем парсер контента на PHP2 Лучший способ прижать футер используя flexbox3 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы
Обратите внимание