Закрытие по клавише Escape

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

Подключение обработчика клавиши Escape

Tooltipster использует jQuery и предоставляет метод on для прослушивания событий. Чтобы закрывать тултип по Escape, необходимо:

  1. Инициализировать тултип с нужными опциями.
  2. Добавить глобальный обработчик события keydown.
  3. Внутри обработчика проверять код нажатой клавиши и вызывать метод закрытия тултипа.

Пример базовой реализации:

$('.tooltip').tooltipster({
    trigger: 'custom', // ручное управление открытием
    interactive: true
});

// Глобальный обработчик Escape
$(document).on('keydown', function(e) {
    if (e.key === 'Escape') {
        $('.tooltip').tooltipster('close');
    }
});

Объяснение кода:

  • trigger: 'custom' — отключает автоматическое открытие тултипа по hover или focus, чтобы полностью контролировать открытие и закрытие через код.
  • interactive: true — разрешает взаимодействие с содержимым тултипа без его автоматического закрытия.
  • tooltipster('close') — метод библиотеки, закрывающий тултип. Вызывается для всех элементов с классом .tooltip.

Закрытие только активного тултипа

Если на странице присутствует несколько тултипов, закрывать нужно не все сразу, а только тот, который открыт. Tooltipster предоставляет метод tooltipster('instance'), позволяющий работать с конкретной инстанцией:

$('.tooltip').tooltipster({
    trigger: 'custom',
    interactive: true
});

$(document).on('keydown', function(e) {
    if (e.key === 'Escape') {
        $('.tooltip').each(function() {
            var instance = $(this).tooltipster('instance');
            if (instance.status().open) {
                instance.close();
            }
        });
    }
});

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

  • instance.status().open возвращает true, если тултип открыт.
  • Метод close() инстанции закрывает только конкретный тултип.
  • Такой подход предотвращает массовое закрытие всех тултипов на странице.

Интеграция с динамически создаваемыми элементами

На страницах с динамическим контентом тултипы могут создаваться после загрузки страницы. Для корректного закрытия по Escape важно использовать делегирование или следить за созданными инстанциями:

$(document).on('mouseenter', '.dynamic-tooltip', function() {
    $(this).tooltipster({
        trigger: 'custom',
        interactive: true
    }).tooltipster('open');
});

$(document).on('keydown', function(e) {
    if (e.key === 'Escape') {
        $('.dynamic-tooltip').each(function() {
            var instance = $(this).tooltipster('instance');
            if (instance && instance.status().open) {
                instance.close();
            }
        });
    }
});
  • instance && instance.status().open защищает от ошибок, если элемент еще не инициализирован.

Автоматическое закрытие с опцией functionReady

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

$('.tooltip').tooltipster({
    trigger: 'custom',
    interactive: true,
    functionReady: function(instance, helper) {
        $(document).on('keydown.tooltipsterEscape', function(e) {
            if (e.key === 'Escape') {
                instance.close();
            }
        });
    },
    functionAfter: function(instance, helper) {
        $(document).off('keydown.tooltipsterEscape');
    }
});

Пояснения:

  • functionReady вызывается при открытии тултипа, что позволяет привязать обработчик только к активной подсказке.
  • Пространство имен keydown.tooltipsterEscape облегчает последующее удаление обработчика.
  • functionAfter гарантирует удаление обработчика после закрытия, предотвращая утечки памяти и конфликт с другими тултипами.

Особенности взаимодействия с модальными окнами

Если тултипы используются внутри модальных окон, необходимо учитывать фокус:

  • Tooltipster не будет реагировать на Escape, если модальное окно перехватывает клавишу.
  • Рекомендуется обрабатывать событие keydown на контейнере модального окна:
$('#modal').on('keydown', function(e) {
    if (e.key === 'Escape') {
        $('#modal .tooltip').each(function() {
            var instance = $(this).tooltipster('instance');
            if (instance.status().open) {
                instance.close();
            }
        });
    }
});

Итоговые рекомендации по закрытию тултипов по Escape

  • Использовать trigger: 'custom' для полной свободы управления.
  • Применять instance.status().open для проверки состояния.
  • Для динамических элементов добавлять обработчик после инициализации.
  • Использовать колбэки functionReady и functionAfter для привязки и удаления обработчиков на уровне конкретной инстанции.
  • В случае модальных окон отслеживать фокус и обрабатывать keydown на контейнере, чтобы избежать конфликтов.

Этот подход обеспечивает точное, надежное и масштабируемое управление закрытием тултипов по клавише Escape на любых страницах с Tooltipster.

Оглавление