От автора: приветствую вас, друзья. Мы продолжаем знакомиться с замечательными плагинами jQuery, позволяющими решить большой круг различных задач. В этой статье мы познакомимся с просто великолепным плагином для организации всплывающих подсказок — это jQuery плагин Tooltipster.
Итак, плагин Tooltipster позволяет реализовать красивую всплывающую подсказку для различных элементов сайта. Фактически это аналог известного плагина Tooltip из комплекта библиотеки jQuery UI. Однако, плагин Tooltipster куда приятнее смотрится, а многообразие вариантов его использования — просто поражает.
Начнем, как обычно, со скачивания плагина. Скачть Tooltipster можно прямо с официального сайта:
Следующим шагом подключим необходимые для работы плагина файлы.
|
1 2 3 |
<link rel="stylesheet" href="css/tooltipster.bundle.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/tooltipster.bundle.js"></script> |
Ну и, конечно же, необходимая для базового примера разметка. Как вы помните, плагин позволяет установить подсказку для любого элемента страницы, пусть это будет обычная ссылка:
|
1 |
<a href="#" class="tooltipster" title="Это всплывающая подсказка">Link</a> |
Пока что перед нами будет обычная ссылка, при наведении на которую будет всплывать стандартная подсказка браузера для атрибута title. Как вы понимаете, атрибут title здесь играет ключевую роль, именно из него плагин будет брать текст всплывающего сообщения.
Теперь вызовем метод плагина для коллекции элементов с классом tooltipster, именно этот класс я использовал для ссылки. Обратите внимание, я не стал использовать класс tooltip из примеров документации. Все дело в том, что я использую Bootstrap, где такой класс уже есть для своего механизма подсказок, поэтому приходится использовать свой класс.
|
1 2 3 |
$(function() { $('.tooltipster').tooltipster(); }); |
Теперь при наведении на ссылку мы будем видеть симпатичное всплывающее сообщение.
Как отмечалось выше, плагин Tooltipster предлагает нам большое количество настроек. Например, мы можем изменить стиль оформления подсказки. Для этого подключим дополнительно файл с выбранной темой (темы идут в комплекте с плагином):
|
1 |
<link rel="stylesheet" href="css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-punk.min.css"> |
И передадим название темы настройкой:
|
1 2 3 |
$('.tooltipster').tooltipster({ theme: 'tooltipster-punk' }); |
Также подсказку можно вызывать не по наведению, а по событию клика:
|
1 2 3 4 |
$('.tooltipster').tooltipster({ theme: 'tooltipster-punk', trigger: 'click' }); |
Особая прелесть заключается в том, что мы можем для подсказки создавать даже HTML шаблоны, проще говоря, в тексте всплывающего сообщения могут быть другие HTML элементы. Например, создадим такой:
|
1 2 3 4 5 6 |
<a href="#" class="tooltipster" data-tooltip-content="#tooltip_content">Link</a> <div class="tooltip_templates"> <span id="tooltip_content"> <img src="//lorempixel.com/50/50" /> <strong>This is the content of my tooltip!</strong> </span> </div> |
Здесь мы связываем значение атрибута data-tooltip-content с идентификатором элемента, который и выступает шаблоном. Конечно же, чтобы этот шаблон изначально был скрыт, нам необходимо это сделать через стили:
|
1 |
.tooltip_templates { display: none; } |
Также для подсказки установим позиционирование right, т.е. подсказка будет всплывать справа от элемента:
|
1 2 3 4 5 |
$('.tooltipster').tooltipster({ theme: 'tooltipster-punk', trigger: 'click', side: 'right' }); |
Просто великолепно, не так ли? И это ведь далеко не все возможности плагина. Попробуйте на досуге поиграться с прочими его возможностями. Ну а у меня на сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
