Кастомные события

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

Кастомные события могут быть инициализированы как при создании тултипа, так и в процессе его работы. Tooltipster использует jQuery-события, что обеспечивает совместимость с существующей системой событий на странице.

Список основных событий

  1. before Срабатывает перед любым действием над тултипом. Используется для проверки условий или модификации параметров перед показом/скрытием.

    $('.tooltip').tooltipster({
    content: 'Пример',
    functionBefore: function(instance, helper){
        if (!helper.origin.dataset.active) {
            return false; // отменяет показ тултипа
        }
    }
});

    Здесь instance — объект тултипа, а helper.origin — DOM-элемент, к которому привязан тултип.

  2. ready Срабатывает после полной инициализации тултипа, когда он готов к взаимодействию.

    $('.tooltip').on('tooltipster-ready', function(event){
    console.log('Тултип полностью готов');
});

  3. position Позволяет реагировать на изменение позиции тултипа при адаптивном расположении.

    $('.tooltip').on('tooltipster-positioned', function(event, instance){
    console.log('Тултип позиционирован:', instance);
});

  4. open и close Эти события срабатывают при открытии и закрытии тултипа.

    $('.tooltip').on('tooltipster-open', function(event, instance){
    console.log('Открыт тултип:', instance);
});

$('.tooltip').on('tooltipster-close', function(event, instance){
    console.log('Закрыт тултип:', instance);
});

  5. update Срабатывает при обновлении содержимого или опций тултипа.

    $('.tooltip').on('tooltipster-update', function(event, instance){
    console.log('Содержимое обновлено');
});

Создание собственных событий

Tooltipster позволяет не только использовать встроенные события, но и создавать собственные. Для этого применяется стандартный метод jQuery .trigger() или встроенные хуки библиотеки.

$('.tooltip').tooltipster({
    content: 'Нажми для действия',
    functionReady: function(instance, helper){
        $(helper.origin).trigger('custom-tooltip-event', [instance]);
    }
});

$('.tooltip').on('custom-tooltip-event', function(event, instance){
    console.log('Сработало кастомное событие', instance);
});

В этом примере при готовности тултипа вызывается кастомное событие custom-tooltip-event, которое можно использовать для любых дополнительных действий, например, запуска анимации или изменения других элементов страницы.

Параметры, доступные в событиях

События Tooltipster предоставляют несколько ключевых объектов и параметров:

  • instance — объект тултипа, через который можно получить доступ к методам open(), close(), content() и другим.

  • helper — объект с информацией о контексте события:

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

Эти объекты позволяют контролировать поведение тултипа в реальном времени, изменять его содержимое, стиль или позиционирование.

Примеры комбинации событий

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

$('.tooltip').tooltipster({
    content: 'Пример',
    functionBefore: function(instance, helper){
        if(helper.origin.dataset.active !== 'true'){
            return false;
        }
    },
    functionReady: function(instance, helper){
        $(helper.origin).trigger('tooltip-ready', [instance]);
    }
});

$('.tooltip').on('tooltip-ready', function(event, instance){
    instance.content('Содержимое изменено через кастомное событие');
    instance.open();
});

В этом примере реализована проверка условий перед показом, а затем через кастомное событие динамически изменяется содержимое и автоматически открывается тултип.

Особенности работы с событиями

  • События срабатывают асинхронно, поэтому важно учитывать порядок вызова.
  • Использование return false в functionBefore предотвращает стандартное действие тултипа.
  • Кастомные события могут передавать дополнительные параметры через массив после имени события, что удобно для передачи состояния или данных.

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

Оглавление