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

33

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

Отже, плагін Tooltipster дозволяє реалізувати гарну підказку для різних елементів сайту. Фактично це аналог відомого плагіна Tooltip з комплекту бібліотеки jQuery UI. Однак, плагін Tooltipster куди приємніше виглядає, а різноманіття варіантів його використання — просто вражає.

Почнемо, як завжди, зі скачування плагіна. Скачть Tooltipster можна прямо з офіційного сайту:

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

Наступним кроком підключимо необхідні для роботи плагіна файли.

Ну і, звичайно ж, необхідна для базового прикладу розмітка. Як ви пам’ятаєте, плагін дозволяє встановити підказку для будь-якого елемента сторінки, нехай це буде звичайна посилання:

Link

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

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

Тепер викличемо метод плагіна для колекції елементів з класом tooltipster, саме цей клас я використовував для посилання. Зверніть увагу, я не почав використовувати клас tooltip з прикладів документації. Вся справа в тому, що я використовую Bootstrap, де такий клас вже є для свого механізму підказок, тому доводиться використовувати свій клас.

$(function() {
$(‘.tooltipster’).tooltipster();
});

Тепер при наведенні на посилання ми будемо бачити симпатичну спливаюче повідомлення.

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

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

І передамо назва теми налаштуванням:

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

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

Також підказку можна викликати не по наведенню, а за події кліку:

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

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

Link


Топ плагінів jQuery. Плагін Tooltipster This is the content of my tooltip!

Тут ми пов’язуємо значення атрибута data-tooltip-content з ідентифікатором елемента, який і виступає шаблоном. Звичайно ж, щоб цей шаблон спочатку був прихований, нам необхідно це зробити через стилі:

.tooltip_templates { display: none; }

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

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

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

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