Каскадные обновления

Tippy.js — это современная библиотека для создания всплывающих подсказок (tooltips) в JavaScript, построенная поверх Popper.js. Она предоставляет гибкие возможности для кастомизации, позиционирования и анимации всплывающих элементов.

Создание простого тултипа осуществляется через функцию tippy():

tippy('#myButton', {
  content: 'Это подсказка',
});
  • #myButton — селектор DOM-элемента, к которому привязывается тултип.
  • content — текст или HTML, отображаемый внутри тултипа.

Tippy.js автоматически управляет позиционированием и скрытием тултипа при наведении, фокусе или клике, в зависимости от настроек.

Позиционирование и смещение

Библиотека позволяет точно контролировать позицию всплывающего окна с помощью опций placement и offset:

tippy('#myButton', {
  content: 'Подсказка справа',
  placement: 'right',
  offset: [0, 10], // [skidding, distance]
});
  • placement — направление тултипа относительно целевого элемента: top, bottom, left, right и их вариации с -start и -end.
  • offset — массив из двух чисел: смещение по горизонтали (skidding) и по вертикали (distance).

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

Анимация и кастомизация внешнего вида

Tippy.js поддерживает несколько встроенных анимаций и позволяет создавать свои:

tippy('#myButton', {
  content: 'Анимированная подсказка',
  animation: 'scale',
  duration: [300, 250], // [show, hide] в миллисекундах
});
  • animation может принимать значения: fade, scale, shift-away, shift-toward.
  • duration — время появления и скрытия тултипа.

Для полного контроля над стилями можно использовать CSS-классы через опцию theme:

tippy('#myButton', {
  content: 'Подсказка с темой',
  theme: 'custom-theme',
});
.tippy-box[data-theme~='custom-theme'] {
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  padding: 8px 12px;
}

Работа с HTML-контентом и интерактивные тултипы

Tippy.js позволяет вставлять сложный HTML-контент и делать тултипы интерактивными:

tippy('#myButton', {
  content: document.querySelector('#tooltipContent'),
  allowHTML: true,
  interactive: true,
});
  • allowHTML — разрешает вставку HTML.
  • interactive — позволяет пользователю взаимодействовать с содержимым тултипа без его закрытия при наведении мыши.

Это особенно полезно для форм, кнопок или всплывающих меню внутри тултипа.

Каскадные обновления (Cascade Updates)

Каскадные обновления — это механизм, позволяющий динамически менять содержимое, позицию и другие свойства тултипов после их создания, сохраняя интерактивность и плавность работы. Tippy.js поддерживает метод setContent и обновление настроек через setProps:

const instance = tippy('#myButton', {
  content: 'Начальное содержимое',
});

instance.setContent('Обновлённое содержимое');
  • setContent(newContent) — мгновенно изменяет текст или HTML тултипа.
  • setProps(newProps) — позволяет менять любые свойства тултипа после инициализации, например, placement, theme или interactive:
instance.setProps({
  placement: 'bottom',
  theme: 'dark',
});

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

Привязка тултипов к динамически создаваемым элементам

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

tippy.delegate(document.body, {
  target: '.dynamic-button',
  content: 'Динамическая подсказка',
});
  • delegate — метод, создающий тултипы для всех элементов, соответствующих селектору target, даже если они добавлены позже.
  • Позволяет каскадно обновлять содержимое через setContent на каждой новой кнопке.

События тултипов

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

instance = tippy('#myButton', {
  content: 'События тултипа',
  onShow(instance) {
    console.log('Тултип показывается', instance);
  },
  onHide(instance) {
    console.log('Тултип скрывается', instance);
  },
  onMount(instance) {
    console.log('Тултип смонтирован в DOM');
  },
});
  • onShow — срабатывает перед показом.
  • onHide — перед скрытием.
  • onMount — после добавления в DOM.

Эти события полезны для реализации каскадных обновлений и синхронизации тултипов с другими частями интерфейса.

Оптимизация каскадных обновлений

При работе с множеством тултипов рекомендуется:

  1. Использовать делегирование вместо создания тултипа для каждого элемента отдельно.
  2. Применять setProps и setContent для изменения свойств без уничтожения тултипа.
  3. Обновлять позицию через метод instance.popperInstance.update() при изменении размера или положения целевого элемента.

Это минимизирует количество пересозданий DOM и обеспечивает плавную работу интерфейса даже при динамическом контенте.

Работа с группами тултипов

Tippy.js позволяет группировать тултипы, синхронизируя их поведение:

const group = tippy.group([tippy('#btn1'), tippy('#btn2')], {
  delay: [100, 200], // задержка появления/скрытия
});
  • tippy.group — объединяет несколько тултипов для единого управления.
  • Полезно для каскадных изменений, когда требуется обновлять свойства всех тултипов одновременно.

Вывод

Каскадные обновления в Tippy.js обеспечивают гибкость и динамичность интерфейсов. Использование методов setContent, setProps, событий и делегирования позволяет создавать сложные, интерактивные подсказки, которые легко адаптируются под изменения данных или действий пользователя. Поддержка HTML, анимаций и кастомных тем делает библиотеку универсальным инструментом для современных веб-приложений.

Оглавление