Событие close

Событие close используется для отслеживания момента закрытия tooltip’а. Оно позволяет выполнять дополнительные действия после скрытия подсказки, например, очищать ресурсы, обновлять интерфейс или логировать пользовательское поведение.

Общий принцип работы

Событие close срабатывает в момент, когда tooltip полностью закрыт, независимо от причины закрытия:

  • пользователь убрал курсор
  • был выполнен клик вне элемента
  • tooltip закрыт программно
  • сработали автоматические условия (таймер, смена состояния)

Важно понимать, что это событие происходит после завершения процесса закрытия, включая анимации.

Подключение обработчика события

Tooltipster предоставляет несколько способов подписки на событие close.

Через параметры инициализации

$('.tooltip').tooltipster({
    functionAfter: function(instance, helper) {
        console.log('Tooltip закрыт');
    }
});

Метод functionAfter является стандартным способом обработки закрытия.

Через систему событий (рекомендуемый способ)

$('.tooltip').on('close.tooltipster', function(event) {
    console.log('Tooltip закрыт через событие');
});

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

Параметры обработчика

При использовании событий обработчик получает объект события, который содержит полезные данные:

$('.tooltip').on('close.tooltipster', function(event) {
    console.log(event);
});

В объекте event доступны:

  • event.type — тип события (close)
  • event.namespace — пространство имён (tooltipster)
  • event.target — DOM-элемент, связанный с tooltip

Разница между close и closing

В Tooltipster существует два связанных события:

  • closing — срабатывает перед закрытием
  • close — срабатывает после закрытия

Это различие критично:

$('.tooltip').on('closing.tooltipster', function() {
    console.log('Начало закрытия');
});

$('.tooltip').on('close.tooltipster', function() {
    console.log('Закрытие завершено');
});

closing можно использовать для предотвращения закрытия, а close — только для реакции на уже произошедшее действие.

Программное закрытие и событие close

При закрытии tooltip через API событие close также срабатывает:

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

instance.close();

Обработчик:

$('.tooltip').on('close.tooltipster', function() {
    console.log('Tooltip закрыт программно');
});

Работа с несколькими tooltip’ами

Если на странице несколько tooltip’ов, событие можно использовать для централизованного контроля:

$('.tooltip').on('close.tooltipster', function(event) {
    const element = $(event.target);
    console.log('Закрыт tooltip у элемента:', element);
});

Типичные сценарии использования

Очистка динамического контента

$('.tooltip').on('close.tooltipster', function() {
    $(this).tooltipster('content', '');
});

Логирование действий пользователя

$('.tooltip').on('close.tooltipster', function() {
    console.log('Пользователь закрыл подсказку');
});

Сброс состояния интерфейса

$('.tooltip').on('close.tooltipster', function() {
    $('.active').removeClass('active');
});

Повторная инициализация данных

$('.tooltip').on('close.tooltipster', function() {
    loadFreshData();
});

Учет анимаций

Tooltipster поддерживает анимации при закрытии. Событие close вызывается после завершения анимации, что гарантирует:

  • DOM уже обновлён
  • tooltip скрыт
  • можно безопасно выполнять операции с интерфейсом

Если требуется реакция до окончания анимации, используется closing.

Отписка от события

Для предотвращения утечек памяти важно удалять обработчики:

$('.tooltip').off('close.tooltipster');

Или для конкретного обработчика:

function onCloseHandler() {
    console.log('Закрытие');
}

$('.tooltip').on('close.tooltipster', onCloseHandler);

// позже
$('.tooltip').off('close.tooltipster', onCloseHandler);

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

При динамически добавляемых элементах:

$(document).on('close.tooltipster', '.tooltip', function() {
    console.log('Закрыт динамический tooltip');
});

Взаимодействие с другими событиями

Событие close часто используется в связке:

  • init — инициализация
  • ready — готовность
  • open — открытие
  • close — завершение работы

Пример цепочки:

$('.tooltip')
    .on('open.tooltipster', function() {
        console.log('Открытие');
    })
    .on('close.tooltipster', function() {
        console.log('Закрытие');
    });

Особенности поведения

  • Срабатывает каждый раз при закрытии
  • Не вызывается, если tooltip не был открыт
  • Работает одинаково для hover, click и manual режимов
  • Не может отменить закрытие (в отличие от closing)

Влияние опций Tooltipster

Некоторые настройки напрямую влияют на момент вызова события:

  • animationDuration — задержка перед close
  • delay — может отложить закрытие
  • trigger — определяет условия закрытия

Пример:

$('.tooltip').tooltipster({
    animation: 'fade',
    animationDuration: 500
});

В этом случае close произойдёт через 500 мс после начала закрытия.

Отладка

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

$('.tooltip')
    .on('opening.tooltipster', () => console.log('opening'))
    .on('open.tooltipster', () => console.log('open'))
    .on('closing.tooltipster', () => console.log('closing'))
    .on('close.tooltipster', () => console.log('close'));

Частые ошибки

1. Использование close вместо closing для отмены

$('.tooltip').on('close.tooltipster', function(e) {
    e.preventDefault(); // НЕ сработает
});

Правильный подход:

$('.tooltip').on('closing.tooltipster', function(e) {
    e.preventDefault();
});

2. Потеря контекста this

$('.tooltip').on('close.tooltipster', function() {
    console.log(this); // DOM-элемент, а не instance
});

Для доступа к instance:

$('.tooltip').on('close.tooltipster', function() {
    const instance = $(this).tooltipster('instance');
});

3. Дублирование обработчиков

function init() {
    $('.tooltip').on('close.tooltipster', handler);
}

При повторном вызове init обработчики накапливаются. Требуется предварительная очистка:

$('.tooltip').off('close.tooltipster').on('close.tooltipster', handler);

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

В крупных приложениях событие close часто используется как часть событийной модели:

class TooltipController {
    constructor(selector) {
        this.$elements = $(selector);
        this.init();
    }

    init() {
        this.$elements.on('close.tooltipster', this.onClose.bind(this));
    }

    onClose(event) {
        const element = $(event.target);
        console.log('Tooltip закрыт:', element);
    }
}

Комбинирование с асинхронными операциями

$('.tooltip').on('close.tooltipster', async function() {
    await saveUserAction();
    console.log('Данные сохранены после закрытия');
});

Контроль состояния приложения

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

let tooltipOpen = false;

$('.tooltip')
    .on('open.tooltipster', () => tooltipOpen = true)
    .on('close.tooltipster', () => tooltipOpen = false);

Роль в UX-паттернах

Событие close играет важную роль в:

  • управлении всплывающими подсказками
  • синхронизации интерфейса
  • отслеживании взаимодействия пользователя
  • управлении фокусом и доступностью

Корректное использование позволяет избежать:

  • «зависших» состояний
  • конфликтов интерфейса
  • утечек памяти
  • лишних перерисовок

Выводы по применению

Событие close — это точка завершения жизненного цикла tooltip’а. Его основная задача — дать возможность безопасно реагировать на факт закрытия без риска вмешательства в процесс отображения или анимации.

Оглавление