Фабрики экземпляров

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

Основные принципы фабрик

Фабрика — это функция tippy или её обёртка, которая возвращает конфигурированный экземпляр, готовый к применению к одному или нескольким элементам DOM. Использование фабрик особенно удобно, когда:

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

Создание фабрики осуществляется через вызов функции tippy с опцией defaultProps либо через создание собственной функции-обёртки:

const buttonTippy = (selector) => {
  return tippy(selector, {
    theme: 'light-border',
    animation: 'scale',
    duration: [200, 200],
    arrow: true,
    placement: 'top'
  });
};

// Применение к элементам
buttonTippy('.btn-primary');
buttonTippy('.btn-secondary');

В этом примере функция buttonTippy выступает фабрикой, которая создаёт тултипы с предопределёнными настройками для любых кнопок, соответствующих переданному селектору.

Параметры конфигурации в фабриках

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

const createTooltip = (selector, content, placement = 'top') => {
  return tippy(selector, {
    content: content,
    placement: placement,
    theme: 'light',
    animation: 'fade',
    delay: [100, 50],
    interactive: true
  });
};

createTooltip('#info-icon', 'Информация о функции');
createTooltip('#warning-icon', 'Предупреждение', 'right');

Здесь фабрика createTooltip принимает три аргумента: селектор, текст тултипа и положение, при этом общие параметры (theme, animation, delay) остаются одинаковыми для всех создаваемых тултипов.

Массовое создание тултипов

Фабрики особенно эффективны для массового применения к коллекции элементов:

const tooltips = document.querySelectorAll('.has-tooltip');

const tooltipFactory = (elements) => {
  return tippy(elements, {
    content(reference) {
      return reference.getAttribute('data-tooltip');
    },
    theme: 'material',
    animation: 'shift-away',
    arrow: true,
    delay: [50, 50]
  });
};

tooltipFactory(tooltips);

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

Динамические фабрики

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

function dynamicTippy(selector, getContent) {
  return tippy(selector, {
    content(reference) {
      return getContent(reference);
    },
    interactive: true,
    trigger: 'mouseenter focus',
    animation: 'scale'
  });
}

dynamicTippy('.user-avatar', (el) => {
  return `Пользователь: ${el.dataset.username}`;
});

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

Встраивание фабрик в модульную архитектуру

Фабрики удобно использовать в проектах с модульной структурой. Например, можно создать отдельный модуль tooltips.js, где будут определены все фабрики:

// tooltips.js
export const infoTooltip = (selector) => tippy(selector, {
  theme: 'info',
  placement: 'right',
  animation: 'fade',
  delay: [150, 0]
});

export const errorTooltip = (selector) => tippy(selector, {
  theme: 'error',
  placement: 'bottom',
  animation: 'scale',
  duration: [300, 100]
});

В основной части приложения подключаются необходимые фабрики и применяются к элементам:

import { infoTooltip, errorTooltip } from './tooltips.js';

infoTooltip('.info-icon');
errorTooltip('.error-icon');

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

Ключевые преимущества использования фабрик

  • Повторное использование кода — одни и те же настройки можно применять к любому числу элементов.
  • Централизованное управление стилем и поведением — любые изменения конфигурации фабрики применяются ко всем тултипам.
  • Поддержка динамического контента — через функции content и параметры фабрики можно легко обновлять текст и оформление тултипов.
  • Совместимость с модульной архитектурой — фабрики легко экспортировать и импортировать, обеспечивая чистую структуру кода.

Практические рекомендации

  1. Выделять общие параметры тултипов в фабрику, чтобы минимизировать дублирование.
  2. Для уникальных случаев передавать в фабрику дополнительные аргументы (content, placement, delay).
  3. Использовать функции content(reference) для динамического содержания.
  4. Применять фабрики к коллекциям элементов через селекторы или NodeList, чтобы экономить ресурсы и упрощать управление.
  5. При работе с модульной структурой создавать отдельные файлы для фабрик с экспортом функций, что повышает читаемость и поддержку проекта.

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

Оглавление