Базовая инициализация

Для начала работы с Tooltipster необходимо подключить саму библиотеку и её стили. Минимальный набор включает:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tooltipster@4.2.8/dist/css/tooltipster.bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tooltipster@4.2.8/dist/js/tooltipster.bundle.min.js"></script>

Обратите внимание, что Tooltipster требует jQuery, поэтому его подключение обязательно до скрипта самой библиотеки.

Инициализация на элементе

Для создания базового всплывающего подсказки используется метод .tooltipster():

$(document).ready(function() {
    $('.tooltip').tooltipster();
});

Здесь все элементы с классом .tooltip автоматически получают подсказки. По умолчанию Tooltipster использует стандартные настройки: анимация fade, задержка появления 300ms и направление подсказки top.

Настройка содержимого подсказки

Содержимое можно задавать через HTML-атрибут title:

<button class="tooltip" title="Это подсказка">Наведи на меня</button>

Или динамически через Jav * aScript:

$('.tooltip').tooltipster({
    content: $('<span>Динамический контент</span>'),
    animation: 'fade',
    delay: 200,
    theme: 'tooltipster-default'
});

Важные моменты:

  • content может быть текстом, HTML-элементом или jQuery-объектом.
  • Для безопасного использования HTML необходимо установить опцию contentAsHTML: true.
  • Tooltipster автоматически экранирует HTML, если не указано обратное.

Основные параметры инициализации

Параметр Описание Значение по умолчанию
animation Тип анимации появления 'fade'
delay Задержка перед показом, мс 300
theme CSS-тема для подсказки 'tooltipster-default'
trigger Событие, вызывающее подсказку (hover, click, custom) 'hover'
interactive Разрешение взаимодействия с содержимым подсказки false
side Направление отображения подсказки (top, bottom, left, right) 'top'
maxWidth Максимальная ширина подсказки 350px

Пример использования нескольких опций одновременно:

$('.tooltip').tooltipster({
    content: 'Расширенный пример подсказки',
    animation: 'grow',
    delay: 100,
    side: 'right',
    maxWidth: 200,
    theme: 'tooltipster-light'
});

Управление подсказкой программно

Tooltipster предоставляет методы для управления через API:

var instance = $('.tooltip').tooltipster().tooltipster('instance');

// Показать подсказку
instance.show();

// Скрыть подсказку
instance.hide();

// Изменить содержимое
instance.content('Новое содержимое');

// Уничтожить подсказку
instance.destroy();

Особенности:

  • Методы можно вызывать как на отдельном элементе, так и на группе элементов.
  • instance нужен для работы с конкретным элементом, особенно если требуется динамическое обновление контента или настройка интерактивных элементов.

Инициализация с множественными элементами

Можно подключить одну конфигурацию к нескольким элементам:

$('.tooltip-multiple').tooltipster({
    theme: 'tooltipster-shadow',
    animation: 'swing',
    delay: 150
});

Все элементы с классом .tooltip-multiple будут использовать одинаковые настройки, что упрощает поддержку кода при большом количестве подсказок на странице.

Настройка через HTML-атрибуты

Tooltipster позволяет указывать параметры прямо в разметке:

<button class="tooltip" title="Подсказка с атрибутами" data-side="bottom" data-animation="fade" data-delay="500">
    Кнопка
</button>

Подключение через JavaScript учитывает эти атрибуты автоматически при вызове $('.tooltip').tooltipster();.

Итоговый минимальный пример

<button class="tooltip" title="Пример подсказки">Наведи</button>

<script>
$(document).ready(function() {
    $('.tooltip').tooltipster({
        theme: 'tooltipster-light',
        animation: 'fade',
        delay: 250,
        side: 'top'
    });
});
</script>

Этот код создаёт простую инициализацию с минимальными настройками, демонстрируя основные возможности библиотеки: подключение, конфигурацию и управление подсказкой через API.

Оглавление