Состояние экземпляра

Каждый экземпляр tippy обладает своим внутренним состоянием, которое контролирует поведение тултипа и позволяет управлять его жизненным циклом после инициализации. Понимание этих свойств критично для создания сложных интерфейсов с динамическими подсказками.

Основные свойства состояния

Экземпляр Tippy.js возвращает объект с набором ключевых свойств и методов. Среди них наиболее важны:

  • state.isEnabled – булевое значение, указывающее, активен ли тултип для взаимодействия. Если false, тултип не будет реагировать на события пользователя, такие как mouseenter или click.

    const instance = tippy(button, { content: 'Пример' });
console.log(instance.state.isEnabled); // true

  • state.isVisible – отражает текущее визуальное состояние тултипа. Значение true появляется в момент появления тултипа на странице и остаётся до его скрытия.

    if (instance.state.isVisible) {
  console.log('Тултип отображается');
}

  • state.isDestroyed – определяет, был ли экземпляр полностью уничтожен методом destroy(). После вызова destroy() объект больше не реагирует на события, а его DOM-элементы удаляются.

  • state.isMounted – указывает, добавлен ли элемент тултипа в DOM. Позволяет проверять, готов ли тултип к отображению, прежде чем выполнять операции с его элементами.

Управление состоянием

Tippy.js предоставляет методы для контроля состояния экземпляра напрямую:

  1. Включение и отключение

    • enable() – активирует тултип, возвращает его к нормальной работе.
    • disable() – деактивирует тултип, игнорируя события пользователя.
    instance.disable(); // Тултип перестанет показываться
instance.enable();  // Возвращаем функциональность

  2. Показ и скрытие

    • show() – принудительное отображение тултипа, независимо от событий.
    • hide() – скрытие тултипа.
    • toggle() – переключение состояния видимости.
    instance.show();
console.log(instance.state.isVisible); // true
instance.hide();
console.log(instance.state.isVisible); // false

  3. Уничтожение экземпляра

    • destroy() – полностью удаляет тултип, освобождая ресурсы. После вызова всех методов взаимодействия с экземпляром использовать нельзя.
    instance.destroy();
console.log(instance.state.isDestroyed); // true

Взаимодействие состояния с событиями

Tippy.js генерирует события, которые позволяют реагировать на изменения состояния:

  • onShow / onHide – вызываются при показе и скрытии тултипа.
  • onMount / onUntrigger – события добавления в DOM и снятия триггера.

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

const instance = tippy(button, {
  content: 'Тултип с событиями',
  onShow(instance) {
    console.log('Тултип показывается, isVisible:', instance.state.isVisible);
  },
  onHide(instance) {
    console.log('Тултип скрыт, isVisible:', instance.state.isVisible);
  }
});

Свойство props и его связь с состоянием

Каждый экземпляр хранит объект props, который содержит текущие настройки тултипа. Изменение этих свойств напрямую влияет на поведение:

  • props.trigger – событие, вызывающее тултип (mouseenter, click, focus).
  • props.delay – задержка перед показом или скрытием тултипа.
  • props.interactive – разрешает взаимодействие с элементами внутри тултипа.

Обновление свойств выполняется методом setProps():

instance.setProps({ content: 'Новый контент', delay: 500 });

После вызова setProps состояние экземпляра может измениться: например, если поменять trigger, тултип перестанет реагировать на старые события.

Асинхронные изменения состояния

Tippy.js поддерживает асинхронное управление состоянием, что позволяет работать с динамическим контентом:

  • Метод show() возвращает Promise, который резолвится после полного отображения тултипа.
  • Использование update() позволяет пересчитать позиции и размеры после изменения содержимого.
instance.setContent('Загрузка...');
instance.show().then(() => {
  console.log('Тултип полностью показан и готов к взаимодействию');
});

Внутренние механизмы состояния

  • Монтаж в DOM – тултип создаётся в момент первого вызова show() или при инициализации с appendTo: document.body.
  • Обновление позиции – при каждом изменении содержимого или скролле позиция пересчитывается через встроенный Popper.js.
  • Контроль видимости через popperInstance – каждый тултип использует объект popperInstance, который управляет позиционированием и автоматически синхронизируется с состоянием isVisible и isMounted.

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

  • Проверка state.isEnabled перед вызовом show() предотвращает ошибки при динамическом включении/выключении тултипов.
  • Использование state.isMounted позволяет безопасно манипулировать DOM-элементами тултипа.
  • Асинхронное управление через Promise от show() и hide() гарантирует точное взаимодействие с контентом и анимациями.
  • После destroy() экземпляр больше нельзя использовать; для повторного применения создаётся новый tippy.

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

Оглавление