Событие closing

Событие closing в библиотеке Tooltipster используется для перехвата момента перед закрытием тултипа. Оно срабатывает непосредственно перед тем, как тултип будет скрыт, и предоставляет возможность повлиять на это поведение.

Ключевая особенность события — возможность отменить закрытие, если это необходимо, либо выполнить дополнительную логику (например, анимации, проверки состояния интерфейса, логирование).

Общая концепция

В жизненном цикле Tooltipster закрытие тултипа происходит в несколько этапов:

  1. Инициируется действие закрытия (например, уход курсора, клик вне элемента, программный вызов)
  2. Срабатывает событие closing
  3. При отсутствии отмены — тултип закрывается
  4. Срабатывает событие after

Событие closing — это последняя точка контроля перед закрытием.

Синтаксис подключения

Событие подключается через параметр functionClosing при инициализации Tooltipster:

$('.tooltip').tooltipster({
    functionClosing: function(instance, helper) {
        // логика перед закрытием
    }
});

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

Функция functionClosing принимает два аргумента:

instance

Экземпляр Tooltipster, к которому относится тултип.

Позволяет:

  • управлять тултипом (открыть, закрыть, обновить)
  • получать доступ к API Tooltipster

Пример:

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

helper

Объект с дополнительной информацией:

Основные свойства:

  • event — событие, вызвавшее закрытие (если применимо)
  • origin — DOM-элемент, к которому привязан тултип

Пример:

function(instance, helper) {
    console.log(helper.event);
    console.log(helper.origin);
}

Отмена закрытия

Главная возможность события closing — предотвращение закрытия тултипа.

Для этого используется возврат false:

$('.tooltip').tooltipster({
    functionClosing: function(instance, helper) {
        return false;
    }
});

Результат:

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

Условная отмена

Часто требуется отменять закрытие только при определённых условиях.

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

$('.tooltip').tooltipster({
    functionClosing: function(instance, helper) {
        if ($('.tooltip-content:hover').length > 0) {
            return false;
        }
    }
});

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

Через helper.event можно определить, что именно вызвало закрытие:

$('.tooltip').tooltipster({
    functionClosing: function(instance, helper) {
        if (helper.event && helper.event.type === 'click') {
            console.log('Закрытие по клику');
        }
    }
});

Это позволяет:

  • различать пользовательские действия
  • реализовывать разную логику для разных типов событий

Асинхронные сценарии

Событие closing не поддерживает асинхронную отмену напрямую (например, через Promise). Однако можно реализовать отложенное закрытие вручную:

$('.tooltip').tooltipster({
    functionClosing: function(instance, helper) {
        setTimeout(function() {
            instance.close();
        }, 2000);

        return false;
    }
});

Поведение:

  • стандартное закрытие отменяется
  • тултип закрывается вручную через 2 секунды

Работа с формами внутри тултипа

Частый сценарий — размещение формы внутри тултипа. В этом случае важно предотвратить закрытие при взаимодействии с элементами формы.

Пример:

$('.tooltip').tooltipster({
    interactive: true,
    functionClosing: function(instance, helper) {
        if ($(helper.event.target).closest('.tooltipster-content').length) {
            return false;
        }
    }
});

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

  • используется опция interactive: true
  • проверяется, произошёл ли клик внутри тултипа

Программный контроль закрытия

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

let allowClose = false;

$('.tooltip').tooltipster({
    functionClosing: function(instance, helper) {
        return allowClose;
    }
});

Изменение состояния:

allowClose = true;
instance.close();

Логирование и отладка

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

$('.tooltip').tooltipster({
    functionClosing: function(instance, helper) {
        console.log('Тултип закрывается', {
            element: helper.origin,
            event: helper.event
        });
    }
});

Комбинирование с другими событиями

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

  • functionBefore — перед открытием
  • functionReady — после открытия
  • functionClosing — перед закрытием
  • functionAfter — после закрытия

Пример:

$('.tooltip').tooltipster({
    functionReady: function() {
        console.log('Открыт');
    },
    functionClosing: function() {
        console.log('Закрывается');
    },
    functionAfter: function() {
        console.log('Закрыт');
    }
});

Типичные ошибки

Игнорирование return false

functionClosing: function() {
    // нет return
}

Результат:

  • закрытие произойдёт, даже если ожидалась отмена

Отсутствие interactive: true

Если тултип содержит интерактивные элементы:

interactive: false

Результат:

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

Неправильная работа с event

helper.event.type

Ошибка:

  • helper.event может быть undefined (например, при программном закрытии)

Правильный вариант:

if (helper.event && helper.event.type === 'click') {
    // безопасная проверка
}

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

1. Подтверждение перед закрытием

$('.tooltip').tooltipster({
    functionClosing: function() {
        return confirm('Закрыть тултип?');
    }
});

2. Защита от случайного закрытия

$('.tooltip').tooltipster({
    functionClosing: function(instance, helper) {
        if (!helper.event) {
            return true;
        }

        if (helper.event.type === 'mouseleave') {
            return false;
        }
    }
});

3. Задержка закрытия

$('.tooltip').tooltipster({
    functionClosing: function(instance) {
        setTimeout(function() {
            instance.close();
        }, 500);

        return false;
    }
});

4. Управление через состояние приложения

let isEditing = true;

$('.tooltip').tooltipster({
    functionClosing: function() {
        return !isEditing;
    }
});

Поведение при разных триггерах

Событие closing срабатывает при:

  • уходе курсора (mouseleave)
  • клике вне тултипа
  • повторном клике по элементу
  • вызове instance.close()
  • автоматическом закрытии (таймер)

Это делает его универсальной точкой контроля.

Взаимодействие с анимациями

Если используется кастомная анимация, событие closing позволяет синхронизировать её:

$('.tooltip').tooltipster({
    functionClosing: function(instance) {
        $('.tooltip-content').fadeOut(300);
        return false;
    }
});

Особенности производительности

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

Итоговое понимание роли события

Событие closing — это:

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

Его правильное использование позволяет превратить тултип из простого элемента подсказки в полноценный интерактивный компонент.

Оглавление