Событие after

Событие after в библиотеке Tooltipster является одним из жизненно важных хуков, позволяющих выполнять действия сразу после того, как тултип полностью появился или исчез. Это событие особенно полезно для управления динамическим контентом, анимациями или логикой, зависящей от состояния тултипа.

Синтаксис

Событие after регистрируется с использованием метода on при инициализации тултипа:

$('#element').tooltipster({
    content: 'Пример текста',
    animation: 'fade',
    delay: 200
}).on('after', function(event) {
    console.log('Tooltip полностью отобразился или скрыт');
});

Параметр event содержит объект события, предоставляемый Tooltipster, с ключевой информацией о состоянии тултипа.

Отличие от ready и before

  • ready – вызывается сразу после того, как тултип становится видимым, но ещё может не завершить анимацию.
  • after – срабатывает только после полной отработки анимации появления или исчезновения тултипа.

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

Использование с параметрами

Событие after можно использовать для проверки состояния тултипа с помощью метода event:

$('#element').tooltipster()
    .on('after', function(event) {
        // Получение состояния тултипа
        var tooltipState = event.tooltipster().status(); // 'closed' или 'open'
        if (tooltipState === 'open') {
            console.log('Тултип теперь полностью видим');
        } else {
            console.log('Тултип полностью скрыт');
        }
    });

Метод status() позволяет определить, открыт ли тултип или уже закрыт. Это важно, если требуется выполнить разные действия в зависимости от состояния.

Доступ к элементу тултипа

Внутри обработчика события after можно получить доступ к самому DOM-элементу тултипа через:

var tooltipElement = event.tooltip; // jQuery объект тултипа

Это позволяет изменять содержимое, стиль или добавлять дополнительные события на тултип после его отображения.

Пример динамического изменения стиля:

$('#element').tooltipster()
    .on('after', function(event) {
        $(event.tooltip).css('background-color', 'lightblue');
    });

Применение для анимаций

Событие after идеально подходит для запуска сторонних анимаций, которые должны начинаться только после полного отображения тултипа:

$('#element').tooltipster()
    .on('after', function(event) {
        $(event.tooltip).fadeIn(300).animate({ top: '+=10px' }, 500);
    });

При этом гарантируется, что внутренняя анимация тултипа не будет конфликтовать с пользовательской анимацией.

Использование с множественными тултипами

Если на странице несколько элементов с Tooltipster, событие after может быть применено ко всем сразу:

$('.tooltip').tooltipster()
    .on('after', function(event) {
        console.log('Тултип для элемента', event.origin, 'полностью обработан');
    });
  • event.origin – ссылка на элемент, к которому привязан тултип.
  • Позволяет индивидуально обрабатывать каждый тултип, даже при массовом использовании.

Событие after для закрытия тултипа

Событие after срабатывает также при закрытии тултипа, что позволяет выполнять очистку или сброс данных:

$('#element').tooltipster()
    .on('after', function(event) {
        if ($(event.origin).tooltipster('status') === 'closed') {
            console.log('Тултип закрыт, можно сбросить временные данные');
        }
    });

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

Резюме по использованию

  • Событие after срабатывает после полного открытия или закрытия тултипа.
  • Позволяет выполнять действия с DOM-элементом тултипа, управлять стилями и запускать дополнительные анимации.
  • Идеально подходит для логики, которая зависит от визуальной готовности тултипа.
  • Поддерживает множественные тултипы на странице с доступом к event.origin.
  • Отличается от ready, так как гарантирует завершение анимации тултипа.

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

Оглавление