Синхронизация состояния

Tippy.js — это библиотека для создания всплывающих подсказок и тултипов на основе Popper.js. Одной из ключевых возможностей является управление состоянием тултипов, их синхронизация с событиями DOM и динамическим контентом. Правильная синхронизация состояния обеспечивает консистентное поведение элементов интерфейса и предотвращает неожиданные конфликты при множественных интеракциях.

Методы управления состоянием

show() и hide()

Методы show() и hide() используются для явного управления видимостью тултипа:

const button = document.querySelector('#myButton');
const tooltip = tippy(button, { content: 'Привет!' });

tooltip.show(); // Показывает тултип
tooltip.hide(); // Скрывает тултип

Важно понимать, что вызовы этих методов обновляют внутреннее состояние тултипа. После show() свойство state.isVisible становится true, а после hide() — false. Это состояние можно использовать для контроля логики интерфейса.

setProps()

Метод setProps() позволяет динамически изменять свойства тултипа без его пересоздания:

tooltip.setProps({ content: 'Новый текст' });

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

События состояния

Tippy.js предоставляет обширный набор событий для синхронизации состояния с DOM:

  • onShow(instance) — вызывается перед отображением тултипа. Можно предотвратить отображение, вернув false.
  • onShown(instance) — вызывается после того, как тултип полностью отображен.
  • onHide(instance) — вызывается перед скрытием тултипа. Можно отменить скрытие.
  • onHidden(instance) — вызывается после полного скрытия тултипа.
  • onMount(instance) и onUnmount(instance) — события жизненного цикла тултипа.

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

Состояние тултипа

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

  • isVisible — видимость тултипа.
  • isMounted — монтирован ли тултип в DOM.
  • props — текущие свойства тултипа.
  • reference — элемент, к которому привязан тултип.
  • popper — экземпляр Popper.js для управления позицией.

Прямой доступ к state позволяет создавать кастомную логику синхронизации:

if (!tooltip.state.isVisible) {
  tooltip.show();
}

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

В современных интерфейсах часто требуется подгрузка данных перед отображением тултипа. Для этого Tippy.js предоставляет поддержку промисов:

tippy(button, {
  content: 'Загрузка...',
  onShow(instance) {
    fetch('/api/data')
      .then(res => res.text())
      .then(data => instance.setContent(data));
  }
});

Метод setContent() обновляет тултип после получения данных, при этом его состояние (isVisible) сохраняется корректным.

Синхронизация нескольких тултипов

При наличии нескольких тултипов на странице важно управлять их состоянием централизованно. Для этого можно хранить ссылки на все экземпляры и использовать массовые операции:

const tooltips = tippy('.tooltip', { content: 'Тултип' });

tooltips.forEach(t => t.hide());

Для динамически добавляемых элементов используется делегирование:

tippy.delegate(document.body, {
  target: '.dynamic-tooltip',
  content: 'Динамический тултип'
});

Delegate автоматически синхронизирует состояние тултипов для новых элементов без необходимости вручную создавать экземпляры.

Анимации и синхронизация

Tippy.js поддерживает анимации появления и скрытия тултипов. Свойство animation может быть установлено в 'fade', 'scale' или кастомное:

tippy(button, {
  content: 'Анимированный тултип',
  animation: 'scale'
});

Важно учитывать, что при анимации события onShow и onHide срабатывают до фактического окончания анимации. Для полной синхронизации состояния с визуальной частью тултипа следует использовать onShown и onHidden.

Заключение по синхронизации состояния

Синхронизация состояния тултипов Tippy.js сводится к управлению видимостью, обновлению свойств, отслеживанию событий жизненного цикла и интеграции с динамическим контентом. Корректная работа с объектом state, методами show(), hide(), setProps() и событиями позволяет создавать сложные интерфейсы с динамическими подсказками без конфликта состояния и визуальных артефактов.

Оглавление