Оптимизация инициализации

Tippy.js позволяет создавать всплывающие подсказки, тултипы и интерактивные элементы интерфейса с минимальным количеством кода. Инициализация базируется на вызове функции tippy(targets, options), где targets — CSS-селектор, элемент DOM или коллекция элементов, а options — объект с настройками поведения подсказки.

Простейший пример:

tippy('.button', {
  content: 'Нажмите для действия',
  placement: 'top',
});

Здесь создается подсказка для всех элементов с классом .button, размещаемая сверху (top).

Множественные селекторы и делегирование

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

tippy.delegate(document.body, {
  target: '.tooltip',
  content(reference) {
    return reference.getAttribute('data-tooltip');
  },
  placement: 'right',
});

Использование delegate сокращает количество созданных экземпляров и снижает нагрузку на DOM. Каждый новый элемент с классом .tooltip автоматически получает подсказку без повторной инициализации.

Ленивое создание экземпляров

Для элементов, которые появляются динамически или находятся за пределами текущей области видимости, применяется ленивая инициализация через функцию tippy.lazy. Это позволяет создавать подсказку только при необходимости, экономя ресурсы:

tippy.lazy('.dynamic', {
  content: 'Динамическая подсказка',
  placement: 'bottom',
});

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

Конфигурация и наследование опций

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

const globalSettings = {
  arrow: true,
  delay: [100, 50],
  theme: 'light',
};

tippy('.button', globalSettings);
tippy('#specialButton', {
  ...globalSettings,
  theme: 'dark',
  placement: 'left',
});

Использование глобальных настроек упрощает поддержку кода и уменьшает количество дублирующихся свойств.

Управление жизненным циклом

Каждый экземпляр Tippy.js возвращает объект с методами управления:

  • show() — отображение подсказки
  • hide() — скрытие подсказки
  • destroy() — полное удаление экземпляра
  • setProps(newProps) — динамическое изменение конфигурации

Пример динамического изменения контента:

const tip = tippy('#updateButton', {
  content: 'Первоначальный текст',
});

tip[0].setProps({
  content: 'Обновленный текст',
});

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

Пакетная инициализация

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

document.querySelectorAll('.item').forEach(element => {
  tippy(element, { placement: 'top', delay: [50, 50] });
});

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

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

  • Минимизация числа экземпляров — делегирование и ленивое создание.
  • Использование глобальных настроек — сокращает повторение кода.
  • Динамическое обновление контента вместо пересоздания тултипов.
  • Очистка неиспользуемых экземпляров с помощью destroy() для элементов, которые удаляются из DOM.
  • Асинхронная подгрузка контента — для сложных тултипов с медиа или большим объемом текста.

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

При использовании React, Vue или Angular предпочтительно создавать Tippy-инстансы внутри компонентов, с управлением через эффекты или хуки, чтобы избежать утечек памяти и лишних рендеров. Например, в React:

import { useEffect, useRef } from 'react';
import tippy from 'tippy.js';

function TooltipButton({ label, tooltip }) {
  const ref = useRef(null);

  useEffect(() => {
    const instance = tippy(ref.current, { content: tooltip });
    return () => instance.destroy();
  }, [tooltip]);

  return <button ref={ref}>{label}</button>;
}

Такой подход обеспечивает корректное уничтожение экземпляров при размонтировании компонентов.

Итоговый принцип оптимизации

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

Оглавление