Событие before

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

Основные характеристики

  • Тип события: синхронное или асинхронное, в зависимости от возвращаемого значения.
  • Контекст вызова: событие срабатывает на элементе, к которому прикреплён тултип.
  • Доступные данные: объект события содержит ссылку на элемент (origin), текущие параметры тултипа (instance), а также возможность изменять содержимое до отображения.

Структура обработчика

Обработчик события before имеет следующий вид:

$('#myElement').tooltipster({
    content: 'Исходный текст',
    functionBefore: function(instance, helper) {
        // instance — объект Tooltipster, через который можно управлять тултипом
        // helper.origin — DOM-элемент, к которому прикреплен тултип
    }
});

Параметры:

  • instance — объект Tooltipster, предоставляет методы для управления тултипом:

    • instance.content(newContent) — заменяет текст или HTML-контент тултипа.
    • instance.option(optionName, value) — изменяет параметры тултипа динамически.
    • instance.show() — принудительно показывает тултип.

  • helper — объект с информацией о текущем элементе:

    • helper.origin — исходный DOM-элемент, к которому привязан тултип.

Асинхронная обработка

Событие before поддерживает асинхронное обновление содержимого. Это полезно, когда текст тултипа нужно получать через AJAX-запрос или вычислять динамически.

$('#myElement').tooltipster({
    functionBefore: function(instance, helper) {
        if (!helper.origin.hasAttribute('data-loaded')) {
            $.get('/tooltip-content', function(data) {
                instance.content(data);
                helper.origin.setAttribute('data-loaded', 'true');
                instance.show(); // показываем тултип после загрузки
            });
            return false; // отменяет показ до завершения асинхронной операции
        }
    }
});

Важные моменты при асинхронной работе:

  • Возврат false из functionBefore останавливает стандартное отображение тултипа до завершения асинхронной операции.
  • После обновления содержимого необходимо вызвать instance.show(), чтобы показать тултип.

Управление параметрами перед показом

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

$('#myElement').tooltipster({
    functionBefore: function(instance, helper) {
        if (window.innerWidth < 768) {
            instance.option('animation', 'fade');
            instance.option('theme', 'tooltipster-light');
        } else {
            instance.option('animation', 'grow');
            instance.option('theme', 'tooltipster-shadow');
        }
    }
});

Применение условий

С помощью before можно реализовать условное отображение тултипа:

$('#myElement').tooltipster({
    functionBefore: function(instance, helper) {
        const shouldShow = helper.origin.dataset.show === 'true';
        return shouldShow; // false предотвращает показ
    }
});

Возврат true позволяет тултипу показаться, false — блокирует отображение.

Важные рекомендации

  • Использовать before для динамического контента или условного показа, избегая громоздких проверок при каждом событии show.
  • Для асинхронного получения данных обязательно возвращать false и вызывать instance.show() после завершения операции.
  • Изменения параметров тултипа через instance.option влияют только на текущий показ, без изменения глобальных настроек.

Примеры расширенного использования

  1. Загрузка изображения перед показом:
$('#imageTooltip').tooltipster({
    functionBefore: function(instance, helper) {
        const img = new Image();
        img.src = helper.origin.dataset.imgSrc;
        img.onl oad = function() {
            instance.content(img);
            instance.show();
        };
        return false;
    }
});
  1. Подстановка данных из формы:
$('#inputTooltip').tooltipster({
    functionBefore: function(instance, helper) {
        const value = document.querySelector('#inputField').value;
        instance.content('Вы ввели: ' + value);
    }
});
  1. Скрытие тултипа по условию:
$('#buttonTooltip').tooltipster({
    functionBefore: function(instance, helper) {
        if (!helper.origin.classList.contains('active')) {
            return false;
        }
    }
});

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

Оглавление