Событие ready

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

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

Событие ready происходит после полной инициализации tooltip, но до его первого отображения (если не используется автооткрытие). Это означает, что:

  • DOM-структура tooltip уже создана
  • Контент вставлен
  • Позиционирование рассчитано
  • Внутренние события Tooltipster активированы

Такой момент идеально подходит для выполнения дополнительной логики, которая должна применяться к уже готовому tooltip.

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

Обработчик события ready задаётся через параметр functionReady при инициализации Tooltipster:

$('.tooltip').tooltipster({
    functionReady: function(instance, helper) {
        console.log('Tooltip готов');
    }
});

Аргументы обработчика

Функция functionReady принимает два аргумента:

instance

Объект экземпляра tooltip, предоставляющий доступ ко всем методам API:

instance.open();
instance.close();
instance.content('Новый текст');

helper

Вспомогательный объект с полезной информацией:

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

Пример:

function(instance, helper) {
    const tooltipElement = helper.tooltip;
    const originElement = helper.origin;

    $(tooltipElement).addClass('initialized');
}

Практические сценарии использования

Динамическая модификация DOM

После создания tooltip можно изменить его структуру:

function(instance, helper) {
    $(helper.tooltip).append('<div class="extra-info">Дополнительно</div>');
}

Инициализация сторонних библиотек

Если внутри tooltip используется сторонний UI-компонент:

function(instance, helper) {
    $(helper.tooltip).find('.datepicker').datepicker();
}

Добавление пользовательских событий

function(instance, helper) {
    $(helper.tooltip).on('click', '.btn', function() {
        alert('Нажато внутри tooltip');
    });
}

Взаимодействие с контентом

Контент tooltip уже доступен и может быть изменён:

function(instance, helper) {
    let content = instance.content();
    instance.content(content + ' (обновлено)');
}

Отличие от других событий

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

  • functionInit — вызывается при инициализации (до создания DOM tooltip)
  • functionBefore — перед открытием
  • functionReady — после полной готовности tooltip
  • functionAfter — после закрытия

Ключевое отличие ready: оно гарантирует наличие DOM-структуры tooltip, что делает его наиболее подходящим для манипуляций с интерфейсом.

Поведение при множественных tooltip

Каждый tooltip имеет собственное событие ready. При инициализации группы элементов:

$('.tooltip').tooltipster({
    functionReady: function(instance, helper) {
        console.log('Готов:', helper.origin);
    }
});

Обработчик будет вызван отдельно для каждого элемента.

Ограничения и особенности

  • Событие вызывается только один раз за жизненный цикл экземпляра
  • Повторное открытие tooltip не вызывает ready снова
  • При уничтожении (instance.destroy()) и повторной инициализации событие сработает заново

Работа с асинхронным контентом

Если контент загружается асинхронно (например, через AJAX), ready всё равно сработает до завершения загрузки, если контент ещё не подгружен.

Для таких случаев используется комбинация:

$('.tooltip').tooltipster({
    content: 'Загрузка...',
    functionReady: function(instance, helper) {
        $.ajax({
            url: '/data',
            success: function(data) {
                instance.content(data);
            }
        });
    }
});

Оптимизация и производительность

Поскольку ready выполняется при инициализации каждого tooltip, важно:

  • избегать тяжёлых операций внутри обработчика
  • минимизировать количество DOM-манипуляций
  • не выполнять повторяющиеся вычисления

Плохая практика:

function(instance, helper) {
    for (let i = 0; i < 10000; i++) {
        console.log(i);
    }
}

Кастомизация поведения tooltip

Событие ready удобно использовать для настройки поведения:

function(instance, helper) {
    if ($(helper.origin).hasClass('important')) {
        instance.option('theme', 'tooltipster-noir');
    }
}

Использование с делегированными tooltip

При делегированной инициализации:

$(document).tooltipster({
    selector: '.tooltip',
    functionReady: function(instance, helper) {
        console.log('Делегированный tooltip готов');
    }
});

ready срабатывает при первом создании tooltip для конкретного элемента, а не при загрузке страницы.

Отладка

Событие удобно для диагностики:

function(instance, helper) {
    console.log('Tooltip:', helper.tooltip);
    console.log('Origin:', helper.origin);
    console.log('Content:', instance.content());
}

Комбинирование с другими событиями

Пример комплексной логики:

$('.tooltip').tooltipster({
    functionReady: function(instance, helper) {
        $(helper.tooltip).addClass('ready');
    },
    functionBefore: function(instance, helper) {
        console.log('Перед открытием');
    },
    functionAfter: function(instance, helper) {
        console.log('После закрытия');
    }
});

Частые ошибки

Попытка доступа к DOM tooltip вне ready:

// Ошибка: tooltip ещё не создан
$('.tooltip').tooltipster();
$('.tooltipster-base').addClass('test');

Правильный подход:

function(instance, helper) {
    $(helper.tooltip).addClass('test');
}

Расширение возможностей через ready

Событие позволяет превращать tooltip в полноценный интерактивный контейнер:

  • формы ввода
  • кнопки действий
  • динамический контент
  • мини-интерфейсы

Пример:

function(instance, helper) {
    $(helper.tooltip).html(`
        <input type="text" placeholder="Введите текст">
        <button class="save">Сохранить</button>
    `);

    $(helper.tooltip).on('click', '.save', function() {
        const value = $(this).siblings('input').val();
        console.log(value);
    });
}

Вывод ключевых особенностей

  • Срабатывает один раз после полной инициализации
  • Предоставляет доступ к DOM tooltip
  • Подходит для кастомизации и расширения интерфейса
  • Является центральной точкой для интеграции внешней логики
  • Работает независимо для каждого экземпляра Tooltipster
Оглавление