Включение debug режима

Tippy.js — это современная библиотека для создания подсказок и тултипов в JavaScript. Для диагностики и отладки поведения тултипов в процессе разработки предусмотрен debug режим, который позволяет визуально и программно отслеживать, как Tippy.js управляет позиционированием, событиями и жизненным циклом тултипов.

Активация debug режима

Debug режим активируется через опцию debug при создании экземпляра Tippy. Она принимает булево значение:

import tippy from 'tippy.js';

tippy('.tooltip', {
  content: 'Пример тултипа',
  debug: true
});

При установке debug: true Tippy.js:

  • Выводит в консоль подробные сообщения о событиях (show, hide, mount, unmount).
  • Включает визуальные маркеры границ тултипа и референтного элемента.
  • Позволяет отследить позицию тултипа относительно целевого элемента, включая любые смещения.

Консольные сообщения

При включенном debug режиме консоль содержит сообщения следующего вида:

  • Tippy instance created — создание нового тултипа.
  • Tippy mounted — тултип смонтирован в DOM.
  • Tippy shown / Tippy hidden — тултип показан или скрыт.
  • Tippy destroyed — тултип удален.
  • Позиция и смещение: Popper data: { placement: 'top', offsets: { x: 0, y: -10 } }.

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

Визуальные подсказки

Debug режим автоматически добавляет к тултипу и референтному элементу контурные рамки:

  • Рамка референтного элемента отображается красным цветом.
  • Рамка тултипа отображается синим цветом.
  • Центральная ось тултипа и точки привязки показываются небольшими маркерами.

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

Использование с динамическим контентом

При динамическом изменении содержимого тултипов debug режим помогает:

  • Проверить автоматическое обновление размеров тултипа при изменении текста или вложенных элементов.
  • Отследить корректность ре-рендеринга при смене контента через setContent:
const instance = tippy('.tooltip', { content: 'Старый текст', debug: true });

instance.setContent('Новый текст');
// В консоли появится сообщение о перерендеринге тултипа
  • Обнаружить неправильные смещения, если тултип выходит за границы окна браузера.

Совместимость с Popper.js

Tippy.js использует Popper.js для вычисления позиции тултипа. Debug режим дополнительно выводит информацию о Popper state:

popperInstance.state // объект с текущим placement, offsets и strategy

С помощью этих данных можно:

  • Проверить placement тултипа (top, bottom-start, right-end и др.).
  • Контролировать смещения через offset и distance.
  • Диагностировать проблемы с переполнением контейнера и fallback-стратегиями.

Советы по использованию debug режима

  • Использовать только в разработке. В продакшне debug режим отключается (debug: false), чтобы избежать лишних сообщений в консоли и визуальных элементов.
  • Совмещать с interactive и followCursor для отладки сложных интерактивных тултипов.
  • Комбинировать с методами жизненного цикла (onShow, onHide, onMount) для отслеживания всех этапов появления тултипа.

Debug режим Tippy.js — мощный инструмент для анализа поведения тултипов. Он обеспечивает как визуальные маркеры, так и подробные сообщения в консоли, что облегчает выявление ошибок позиционирования, неправильных смещений и проблем с динамическим контентом.

Оглавление