Программное управление отображением

Для полноценного управления поведением всплывающих подсказок необходимо правильно инициализировать Tooltipster на элементах DOM. Базовая инициализация выглядит следующим образом:

$('.tooltip-element').tooltipster({
    content: 'Пример подсказки',
    trigger: 'custom',
    interactive: true
});

Ключевые моменты:

  • trigger: 'custom' – отключает стандартные триггеры (hover, click), позволяя управлять открытием и закрытием подсказки программно.
  • interactive: true – позволяет пользователю взаимодействовать с контентом подсказки без её мгновенного закрытия.

Методы управления подсказкой

Tooltipster предоставляет набор методов, которые можно вызвать через jQuery-интерфейс.

Открытие и закрытие

  • open() – открывает подсказку.
  • close() – закрывает подсказку.
  • toggle() – переключает состояние между открытым и закрытым.
var instance = $('.tooltip-element').tooltipster();

// Открытие подсказки
instance.tooltipster('open');

// Закрытие подсказки
instance.tooltipster('close');

// Переключение состояния
instance.tooltipster('toggle');

Динамическое изменение контента

Содержимое подсказки может быть изменено в любой момент:

instance.tooltipster('content', 'Новый контент подсказки');

Дополнительно можно передавать объект jQuery или HTML-разметку для сложных подсказок:

var newContent = $('<div><strong>Заголовок</strong><p>Описание</p></div>');
instance.tooltipster('content', newContent);

Проверка состояния

Метод status() возвращает строку, описывающую текущее состояние подсказки:

  • 'closed' – подсказка закрыта.
  • 'open' – подсказка открыта.
  • 'appearing' / 'disappearing' – анимации открытия и закрытия в процессе.
if (instance.tooltipster('status') === 'open') {
    console.log('Подсказка отображается');
}

Управление анимацией и временем отображения

Tooltipster позволяет гибко настраивать анимацию и задержки через параметры при инициализации или метод option().

instance.tooltipster('option', 'animation', 'fade');
instance.tooltipster('option', 'delay', 300);
  • animation – тип анимации: 'fade', 'grow', 'swing', 'slide'.
  • delay – время в миллисекундах перед открытием подсказки.

Можно одновременно менять несколько опций:

instance.tooltipster('option', {
    theme: 'tooltipster-light',
    side: 'top'
});

Программное закрытие при взаимодействии вне элемента

Для реализации закрытия подсказки при клике вне неё используется событие document:

$(document).on('click', function(e) {
    if (!$(e.target).closest('.tooltip-element').length &&
        instance.tooltipster('status') === 'open') {
        instance.tooltipster('close');
    }
});

Это особенно полезно для интерактивных подсказок, содержащих формы или кнопки.

Асинхронная загрузка содержимого

Tooltipster поддерживает динамическую подгрузку контента через функцию, возвращающую промис:

instance.tooltipster({
    content: 'Загрузка...',
    functionBefore: function(instance, helper) {
        if (!helper.origin.data('loaded')) {
            $.get('/tooltip-content')
                .done(function(data) {
                    instance.content(data);
                    helper.origin.data('loaded', true);
                });
        }
    }
});

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

  • functionBefore вызывается перед открытием подсказки.
  • Можно кешировать результат для предотвращения повторных запросов.

Работа с множественными экземплярами

Для управления несколькими подсказками применяется селектор jQuery с циклом:

$('.tooltip-element').each(function() {
    var inst = $(this).tooltipster();
    $(this).on('click', function() {
        inst.tooltipster('toggle');
    });
});

Таким образом можно создавать индивидуальное управление для каждого элемента.

Интеграция с другими библиотеками

Tooltipster корректно взаимодействует с динамическими элементами, например, при использовании фреймворков типа Vue или React. Главное — инициализировать подсказку после рендеринга элемента:

// В методе mounted компонента Vue
this.$nextTick(() => {
    $(this.$refs.tooltipElement).tooltipster({
        content: 'Подсказка Vue'
    });
});

Это предотвращает ошибки, связанные с отсутствием DOM-элементов во время инициализации.

Отслеживание событий подсказки

Tooltipster предоставляет события:

  • show / shown – при открытии подсказки.
  • hide / hidden – при закрытии.
  • before / after – перед или после анимации.
instance.on('shown', function() {
    console.log('Подсказка отображена полностью');
});

Эти события позволяют синхронизировать действия с другими частями интерфейса.

Использование метод цепочек для управления

Все методы Tooltipster возвращают jQuery-объект, что позволяет выстраивать цепочки вызовов:

instance.tooltipster('open').tooltipster('content', 'Обновленный контент').tooltipster('option', 'animation', 'grow');

Это облегчает создание комплексного поведения без многократного обращения к одной и той же переменной.

Приведенные подходы дают полный контроль над жизненным циклом подсказок в Tooltipster, позволяя создавать интерактивные, динамичные и управляемые через код элементы интерфейса.

Оглавление