Закрытие по клику вне области

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

Свойство trigger и его роль

Для контроля открытия и закрытия тултипов используется опция trigger. По умолчанию она может иметь значения:

  • hover – открытие при наведении курсора.
  • click – открытие при клике.
  • custom – управление тултипом вручную через методы API.

Чтобы включить закрытие по клику вне тултипа, важно использовать click или custom, так как hover не предусматривает такой функционал автоматически.

$('.tooltip-element').tooltipster({
    trigger: 'click',
    interactive: true
});

Пояснение ключевых опций:

  • interactive: true – делает тултип интерактивным, позволяя взаимодействовать с содержимым (кнопки, ссылки, формы) без его закрытия при клике внутри.
  • trigger: 'click' – открывает тултип по клику, что упрощает настройку закрытия вне области.

Автоматическое закрытие при клике вне области

Tooltipster позволяет реализовать закрытие тултипа при клике вне его области через опцию functionBefore или глобальные события документа. Один из распространённых подходов:

$('.tooltip-element').tooltipster({
    trigger: 'custom',
    interactive: true,
    functionReady: function(instance, helper) {
        $(document).on('click.tooltipsterClose', function(e) {
            if (!$(e.target).closest(helper.tooltip).length && 
                !$(e.target).closest(helper.origin).length) {
                instance.close();
            }
        });
    },
    functionAfter: function(instance, helper) {
        $(document).off('click.tooltipsterClose');
    }
});

Разбор работы кода:

  1. trigger: 'custom' – ручное управление тултипом через API.
  2. functionReady – срабатывает, когда тултип открыт. В этот момент добавляется обработчик клика по документу.
  3. Проверка closest – гарантирует, что клик произошёл не по тултипу и не по элементу-источнику.
  4. instance.close() – закрывает тултип.
  5. functionAfter – срабатывает после закрытия тултипа и удаляет обработчик, предотвращая утечки памяти и множественные срабатывания.

Использование опции sideClick и triggerClose

Tooltipster версии 4+ содержит встроенные параметры для удобного закрытия:

  • sideClick: true – закрывает тултип при клике вне его области автоматически.
  • triggerClose: { click: true, scroll: false } – позволяет отдельно настраивать закрытие при различных событиях.

Пример с sideClick:

$('.tooltip-element').tooltipster({
    trigger: 'click',
    interactive: true,
    sideClick: true
});

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

  • Простое решение без написания дополнительных обработчиков.
  • Работает только при interactive: true.
  • Позволяет избежать конфликтов с другими скриптами, изменяющими DOM.

Комбинированный подход для сложных случаев

В сложных интерфейсах, где один клик может затрагивать несколько тултипов или элементов с разным поведением, рекомендуется комбинировать trigger: 'custom' с глобальными событиями. Например:

var tooltips = $('.tooltip-element').tooltipster({
    trigger: 'custom',
    interactive: true
});

tooltips.on('click', function() {
    var instance = $(this).tooltipster('instance');
    instance.open();
});

$(document).on('click', function(e) {
    tooltips.each(function() {
        var instance = $(this).tooltipster('instance');
        if (!$(e.target).closest(instance.content()).length &&
            !$(e.target).closest(this).length) {
            instance.close();
        }
    });
});

Преимущества:

  • Контролируется сразу несколько тултипов.
  • Гибкая логика открытия/закрытия.
  • Можно добавлять исключения, например, для элементов, по которым клик не должен закрывать тултип.

Практические рекомендации

  • Всегда использовать interactive: true для тултипов с формами или кликабельным контентом.
  • Если необходима простая реализация закрытия по клику вне области — используйте sideClick: true.
  • Для сложной логики с несколькими тултипами лучше применять custom trigger с глобальным обработчиком документа.
  • Не забывать удалять обработчики после закрытия тултипа, чтобы избежать утечек памяти и конфликтов событий.

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

Оглавление