Получение конкретного экземпляра

Библиотека Tooltipster создаёт всплывающие подсказки на основе элементов DOM. Для управления подсказками после их инициализации необходимо получать доступ к конкретным экземплярам, чтобы изменять содержимое, настройки или управлять жизненным циклом tooltip’а.

Инициализация выполняется стандартным вызовом:

$('.tooltip-element').tooltipster({
    content: 'Пример подсказки',
    theme: 'tooltipster-shadow',
    animation: 'fade',
    delay: 200
});

После этого каждый элемент, на котором применён Tooltipster, содержит внутренний объект-экземпляр. Для получения конкретного экземпляра используется метод tooltipster('instance').

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

instance теперь предоставляет доступ к методам и свойствам конкретного tooltip’а.

Методы экземпляра

Экземпляр Tooltipster позволяет:

  • content([newContent]) – получить или установить содержимое подсказки.

    instance.content(); // возвращает текущее содержимое
instance.content('Новое содержимое'); // заменяет на новое

  • open() и close() – открыть или закрыть подсказку программно.

    instance.open();
instance.close();

  • reposition() – пересчитать позицию подсказки, полезно при изменении размеров окна или контента.

    instance.reposition();

  • destroy() – полностью удалить tooltip с элемента и освободить ресурсы.

    instance.destroy();

  • option(optionName, [value]) – получить или изменить любую опцию после инициализации.

    instance.option('animation'); // получить текущую анимацию
instance.option('animation', 'grow'); // изменить анимацию на "grow"

Получение экземпляра для нескольких элементов

Если tooltip установлен на нескольких элементах одновременно, метод instance() применяется к конкретному элементу через выборку. Прямое получение всех экземпляров не предусмотрено, поэтому необходимо перебирать элементы:

$('.tooltip-element').each(function() {
    var instance = $(this).tooltipster('instance');
    console.log(instance.content());
});

Использование .each() гарантирует, что для каждого DOM-элемента создаётся и используется собственный экземпляр.

Доступ к внутренним событиям через экземпляр

Экземпляр позволяет подключать обработчики событий на конкретный tooltip:

instance.on('open', function(instance) {
    console.log('Подсказка открыта:', instance);
});

instance.on('close', function(instance) {
    console.log('Подсказка закрыта:', instance);
});

Доступ к событиям через экземпляр удобен для динамического управления поведением подсказки без изменения глобальных настроек Tooltipster.

Практический пример динамического обновления

var instance = $('#dynamic-tooltip').tooltipster({
    content: 'Первоначальный текст',
    delay: 100
}).tooltipster('instance');

$('#update-button').on('click', function() {
    instance.content('Обновлённый текст');
    instance.open();
});

В этом примере содержимое tooltip’а обновляется по клику, при этом управление полностью осуществляется через экземпляр, что исключает необходимость пересоздания подсказки.

Резюме по работе с экземплярами

  • Метод tooltipster('instance') является единственным официальным способом получить объект конкретного tooltip’а.
  • Экземпляр предоставляет полный набор API: управление открытием/закрытием, изменение содержимого, динамическое изменение опций и подписка на события.
  • Для нескольких элементов следует использовать перебор через .each(), чтобы гарантировать работу с нужным DOM-элементом.
  • Использование экземпляров повышает гибкость и позволяет интегрировать Tooltipster в динамические интерфейсы без пересоздания подсказок.

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

Оглавление