Unit тестирование

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

Базовое использование выглядит так:

tippy('#myButton', {
  content: 'Привет, это подсказка!',
  placement: 'top',
});
  • content — текст или HTML, отображаемый во всплывающем окне.
  • placement — позиция относительно целевого элемента (top, bottom, left, right).
  • Tippy автоматически отслеживает положение и изменяет позицию при необходимости, чтобы тултип не выходил за границы окна.

Инициализация и кастомизация

Tippy.js поддерживает несколько способов инициализации:

  1. По селектору:
tippy('.btn', { content: 'Нажмите меня' });

Все элементы с классом .btn получат тултипы.

  1. Через элемент DOM:
const button = document.querySelector('#myButton');
tippy(button, { content: 'Подсказка для кнопки' });
  1. С динамическим содержимым:
tippy('#dynamic', {
  content: () => `Время: ${new Date().toLocaleTimeString()}`,
});

Это позволяет обновлять подсказку в реальном времени.

Триггеры и управление состоянием

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

  • mouseenter focus — появляется при наведении мыши или фокусе.
  • click — появляется по клику.
  • manual — управление через методы API (show(), hide(), toggle()).

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

const tip = tippy('#manualButton', {
  content: 'Ручное управление',
  trigger: 'manual',
});

document.querySelector('#showBtn').addEventListener('click', () => tip.show());
document.querySelector('#hideBtn').addEventListener('click', () => tip.hide());

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

Анимации и темы

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

tippy('#animated', {
  content: 'С анимацией',
  animation: 'scale', // fade, shift-away, shift-toward, perspective, scale
  theme: 'custom-theme',
});

Создание кастомной темы через CSS:

.tippy-box[data-theme~='custom-theme'] {
  background-color: #333;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
}

Поддержка нескольких тем позволяет визуально разграничивать подсказки в интерфейсе.

Сложное содержимое и HTML

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

tippy('#htmlTip', {
  content: `
    <div>
      <strong>Заголовок</strong>
      <p>Описание с <em>HTML</em></p>
    </div>
  `,
  allowHTML: true,
});

Опция allowHTML: true необходима для корректного рендеринга HTML. Также можно передавать готовые DOM-элементы:

const element = document.createElement('div');
element.textContent = 'Текст через DOM';
tippy('#domTip', { content: element });

Интерактивные подсказки

Для сложных подсказок, которые должны быть интерактивными (например, формы или кнопки внутри тултипа), используется опция interactive:

tippy('#interactiveTip', {
  content: '<button id="innerBtn">Нажми меня</button>',
  allowHTML: true,
  interactive: true,
});

Это предотвращает автоматическое скрытие подсказки при клике по её содержимому.

Отложенная и условная инициализация

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

document.addEventListener('mouseover', (e) => {
  if (e.target.matches('.lazy')) {
    tippy(e.target, { content: 'Динамически созданная подсказка' });
  }
});

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

Работа с Popper.js и кастомными модификаторами

Tippy.js предоставляет доступ к Popper.js через опцию popperOptions, что позволяет настраивать поведение позиционирования:

tippy('#popperTip', {
  content: 'Тултип с кастомным смещением',
  popperOptions: {
    modifiers: [
      {
        name: 'offset',
        options: { offset: [0, 20] },
      },
    ],
  },
});

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

Коллбэки жизненного цикла

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

tippy('#callbackTip', {
  content: 'Подсказка с коллбэками',
  onShow(instance) {
    console.log('Тултип показан', instance);
  },
  onHide(instance) {
    console.log('Тултип скрыт', instance);
  },
  onMount(instance) {
    console.log('Тултип смонтирован в DOM', instance);
  },
});

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

Поддержка множественных тултипов и делегирование

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

tippy.delegate(document.body, {
  target: '.delegated',
  content(reference) {
    return `Подсказка для ${reference.textContent}`;
  },
});

Делегирование экономит ресурсы, особенно если элементы добавляются динамически.

Интеграция с фреймворками

Tippy.js легко интегрируется с React, Vue и Angular. Для React используется отдельный пакет @tippyjs/react, который позволяет создавать компонентные тултипы с управляемым состоянием и JSX-контентом. В Vue и Angular можно оборачивать компоненты и передавать их через content или v-html.

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

  • Использование delegate для больших списков элементов.
  • Ленивое создание тултипов (trigger: 'manual' + создание при необходимости).
  • Минимизация анимаций на мобильных устройствах.
  • Кэширование DOM-содержимого для часто используемых подсказок.

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

Оглавление