Топ плагинов jQuery. Плагин Tooltipster

Топ плагинов jQuery. Плагин Tooltipster

От автора: приветствую вас, друзья. Мы продолжаем знакомиться с замечательными плагинами jQuery, позволяющими решить большой круг различных задач. В этой статье мы познакомимся с просто великолепным плагином для организации всплывающих подсказок — это jQuery плагин Tooltipster.

Итак, плагин Tooltipster позволяет реализовать красивую всплывающую подсказку для различных элементов сайта. Фактически это аналог известного плагина Tooltip из комплекта библиотеки jQuery UI. Однако, плагин Tooltipster куда приятнее смотрится, а многообразие вариантов его использования — просто поражает.

Начнем, как обычно, со скачивания плагина. Скачть Tooltipster можно прямо с официального сайта:

Топ плагинов jQuery. Плагин Tooltipster

Следующим шагом подключим необходимые для работы плагина файлы.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
<link rel="stylesheet" href="css/tooltipster.bundle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/tooltipster.bundle.js"></script>

Ну и, конечно же, необходимая для базового примера разметка. Как вы помните, плагин позволяет установить подсказку для любого элемента страницы, пусть это будет обычная ссылка:

<a href="#" class="tooltipster" title="Это всплывающая подсказка">Link</a>

Пока что перед нами будет обычная ссылка, при наведении на которую будет всплывать стандартная подсказка браузера для атрибута title. Как вы понимаете, атрибут title здесь играет ключевую роль, именно из него плагин будет брать текст всплывающего сообщения.

Топ плагинов jQuery. Плагин Tooltipster

Теперь вызовем метод плагина для коллекции элементов с классом tooltipster, именно этот класс я использовал для ссылки. Обратите внимание, я не стал использовать класс tooltip из примеров документации. Все дело в том, что я использую Bootstrap, где такой класс уже есть для своего механизма подсказок, поэтому приходится использовать свой класс.

$(function() {
 $('.tooltipster').tooltipster();
});

Теперь при наведении на ссылку мы будем видеть симпатичное всплывающее сообщение.

Топ плагинов jQuery. Плагин Tooltipster

Как отмечалось выше, плагин Tooltipster предлагает нам большое количество настроек. Например, мы можем изменить стиль оформления подсказки. Для этого подключим дополнительно файл с выбранной темой (темы идут в комплекте с плагином):

<link rel="stylesheet" href="css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-punk.min.css">

И передадим название темы настройкой:

$('.tooltipster').tooltipster({
 theme: 'tooltipster-punk'
});

Топ плагинов jQuery. Плагин Tooltipster

Также подсказку можно вызывать не по наведению, а по событию клика:

$('.tooltipster').tooltipster({
 theme: 'tooltipster-punk',
 trigger: 'click'
});

Особая прелесть заключается в том, что мы можем для подсказки создавать даже HTML шаблоны, проще говоря, в тексте всплывающего сообщения могут быть другие HTML элементы. Например, создадим такой:

<a href="#" class="tooltipster" data-tooltip-content="#tooltip_content">Link</a>
<div class="tooltip_templates">
 <span id="tooltip_content">
 <img src="http://lorempixel.com/50/50" /> <strong>This is the content of my tooltip!</strong>
 </span>
</div>

Здесь мы связываем значение атрибута data-tooltip-content с идентификатором элемента, который и выступает шаблоном. Конечно же, чтобы этот шаблон изначально был скрыт, нам необходимо это сделать через стили:

.tooltip_templates { display: none; }

Также для подсказки установим позиционирование right, т.е. подсказка будет всплывать справа от элемента:

$('.tooltipster').tooltipster({
 theme: 'tooltipster-punk',
 trigger: 'click',
 side: 'right'
});

Топ плагинов jQuery. Плагин Tooltipster

Просто великолепно, не так ли? И это ведь далеко не все возможности плагина. Попробуйте на досуге поиграться с прочими его возможностями. Ну а у меня на сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree