Событие click

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

Инициализация Tooltipster с обработкой `click`

Для привязки подсказки к элементу с обработкой клика используется опция trigger. Она принимает значения:

$('.tooltip-element').tooltipster({
    content: 'Пример подсказки',
    trigger: 'click'
});

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

trigger: 'click' означает, что подсказка откроется только при клике на целевой элемент.
При повторном клике подсказка будет закрыта автоматически, если не настроено иное поведение.
Стандартные триггеры hover и focus в данном случае игнорируются.

Контроль поведения открытия и закрытия

Событие click может комбинироваться с дополнительными настройками:

$('.tooltip-element').tooltipster({
    content: 'Детальная информация',
    trigger: 'click',
    interactive: true,
    autoClose: false
});

interactive: true — позволяет пользователю взаимодействовать с подсказкой, например, кликать по ссылкам или кнопкам внутри неё.
autoClose: false — отключает автоматическое закрытие подсказки при клике вне элемента. Полезно для сложных меню или форм внутри подсказки.

Программное управление подсказкой при клике

Tooltipster предоставляет методы .tooltipster('open') и .tooltipster('close'), которые можно вызывать внутри обработчика клика для более гибкого управления:

$('.tooltip-element').on('click', function() {
    var instance = $(this).tooltipster('instance');

    if (instance.status().open) {
        instance.close();
    } else {
        instance.open();
    }
});

Пояснение:

Метод instance.status().open возвращает булево значение, показывающее, открыта ли подсказка.
Такой подход позволяет реализовать переключение состояния подсказки при клике, контролируя её вручную.

События Tooltipster, связанные с кликом

Tooltipster генерирует несколько событий, которые можно использовать совместно с click:

beforeOpen — вызывается перед открытием подсказки.
afterOpen — после открытия.
beforeClose — перед закрытием.
afterClose — после закрытия.

Пример использования:

$('.tooltip-element').tooltipster({
    content: 'Информация по клику',
    trigger: 'click'
}).on('afterOpen', function() {
    console.log('Подсказка открыта');
}).on('afterClose', function() {
    console.log('Подсказка закрыта');
});

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

Работа с несколькими подсказками

Если на странице есть несколько элементов с триггером click, стоит использовать селектор и инициализацию для группы элементов:

$('.tooltip-element').tooltipster({
    content: 'Общая подсказка',
    trigger: 'click',
    multiple: false
});

multiple: false — при открытии одной подсказки автоматически закрывает все остальные, что предотвращает наложение нескольких подсказок на экран.
Если требуется открывать несколько подсказок одновременно, multiple можно оставить включенным.

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

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

$('.tooltip-element').tooltipster({
    trigger: 'click',
    interactive: true,
    functionReady: function(instance, helper) {
        $(document).on('click.tooltipster', function(e) {
            if (!$(helper.origin).is(e.target) && $(helper.origin).has(e.target).length === 0 &&
                !$(helper.tooltip).is(e.target) && $(helper.tooltip).has(e.target).length === 0) {
                instance.close();
            }
        });
    }
});

Здесь проверяется, был ли клик вне целевого элемента и подсказки, и в этом случае подсказка закрывается.
Использование пространства имён события (.tooltipster) позволяет безопасно удалять обработчик при необходимости.

Динамическое изменение содержимого подсказки при клике

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

$('.tooltip-element').tooltipster({
    trigger: 'click',
    content: 'Загрузка...',
    functionBefore: function(instance, helper) {
        var $origin = $(helper.origin);
        if (!$origin.data('loaded')) {
            $.get('/tooltip-data', function(data) {
                instance.content(data);
                $origin.data('loaded', true);
            });
        }
    }
});

functionBefore вызывается перед открытием подсказки.
Используется для асинхронной подгрузки данных, при этом подсказка сначала отображается с текстом-заглушкой.
Позволяет избежать повторной загрузки, проверяя data('loaded').