Фабричные функции

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

Основы создания тултипов через фабричные функции

В Tippy.js создание тултипа обычно выглядит следующим образом:

tippy(targetElement, {
  content: 'Пример подсказки',
  placement: 'top',
  animation: 'scale',
});

Фабричная функция позволяет вынести логику создания тултипа в отдельную функцию:

function createTooltip(element, text, placement = 'top') {
  return tippy(element, {
    content: text,
    placement: placement,
    animation: 'fade',
    delay: [100, 100],
  });
}

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

Параметры фабричных функций

Фабричные функции могут принимать:

  1. Элемент или селектор — DOM-узел или строку CSS-селектора.
  2. Контент тултипа — строка, HTML-элемент, функция, возвращающая контент.
  3. Конфигурация отображения — объект с ключами placement, animation, theme, delay, trigger и другими.

Пример расширенной фабричной функции с кастомной конфигурацией:

function createCustomTooltip(element, content, options = {}) {
  return tippy(element, {
    content: content,
    placement: options.placement || 'bottom',
    animation: options.animation || 'scale',
    theme: options.theme || 'light',
    delay: options.delay || [50, 50],
    trigger: options.trigger || 'mouseenter focus',
    interactive: options.interactive || false,
  });
}

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

Фабричные функции с динамическим контентом

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

function createDynamicTooltip(element, getContent) {
  return tippy(element, {
    content: getContent,
    allowHTML: true,
    placement: 'right',
  });
}

// Использование:
createDynamicTooltip(button, () => `Текущее время: ${new Date().toLocaleTimeString()}`);

Здесь getContent вызывается при каждом отображении тултипа, что позволяет обновлять содержимое в реальном времени.

Создание фабрик для группы элементов

Часто необходимо создать одинаковые тултипы для множества элементов. Фабричная функция может быть расширена для работы с NodeList или массивом элементов:

function createTooltips(elements, content, options = {}) {
  elements.forEach(el => {
    tippy(el, {
      content: typeof content === 'function' ? content(el) : content,
      ...options
    });
  });
}

// Пример использования:
createTooltips(document.querySelectorAll('.tooltip'), el => `Элемент: ${el.dataset.name}`, { placement: 'top' });

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

Комбинирование фабричных функций с состоянием

Фабричные функции могут использовать состояние или внешние данные для изменения поведения тултипа. Например:

function createStatefulTooltip(element, state) {
  return tippy(element, {
    content: state.active ? 'Активный элемент' : 'Неактивный элемент',
    theme: state.active ? 'success' : 'error',
    placement: 'bottom',
  });
}

// Использование с объектом состояния:
const state = { active: true };
createStatefulTooltip(document.querySelector('#status'), state);

Изменение состояния можно сопровождать обновлением тултипа через метод .setContent():

tooltipInstance.setContent('Новое содержимое');

Преимущества фабричных функций

  • Повторное использование — одна функция создаёт тултипы для разных элементов.
  • Чистота кода — избегается дублирование конфигураций.
  • Гибкость — легко изменять параметры и динамически управлять контентом.
  • Масштабируемость — подходит для проектов с множеством элементов, требующих подсказок.

Итоговая структура фабричной функции

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

  1. Приём элемента или селектора.
  2. Контента (строка, HTML, функция).
  3. Настраиваемые параметры с дефолтными значениями.
  4. Возможность обработки массивов элементов.
  5. Поддержку динамического обновления контента.

Пример полной фабрики:

function createTooltipFactory(elementOrSelector, content, options = {}) {
  const elements = typeof elementOrSelector === 'string' 
    ? document.querySelectorAll(elementOrSelector)
    : [elementOrSelector];

  return Array.from(elements).map(el => 
    tippy(el, {
      content: typeof content === 'function' ? content(el) : content,
      placement: options.placement || 'top',
      animation: options.animation || 'fade',
      theme: options.theme || 'light',
      delay: options.delay || [0, 0],
      interactive: options.interactive || false,
      ...options
    })
  );
}

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

Оглавление