Создание пресетов

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

Основные принципы работы с пресетами

В Tippy.js пресет — это объект конфигурации, который определяет поведение тултипа: его позиционирование, анимацию, триггеры, задержки и другие параметры. Создание пресета осуществляется через функцию tippy.setDefaultProps() или при использовании кастомных экземпляров tippy.createSingleton().

Пример базового пресета:

tippy.setDefaultProps({
  placement: 'top',
  animation: 'fade',
  delay: [100, 300],
  theme: 'light-border'
});

В этом примере:

  • placement: 'top' задаёт расположение тултипа над элементом.
  • animation: 'fade' активирует плавное появление.
  • delay: [100, 300] определяет задержку появления и скрытия.
  • theme: 'light-border' назначает светлую тему с границей.

После установки таких настроек все последующие тултипы, созданные с помощью tippy(targets), будут использовать эти значения по умолчанию.

Создание пользовательских пресетов

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

Пример создания именованного пресета:

const darkTooltip = tippy.createSingleton([], {
  placement: 'bottom',
  theme: 'dark',
  animation: 'scale',
  delay: [0, 200],
});

Особенности подхода:

  • createSingleton() позволяет объединять несколько тултипов с одинаковым пресетом, экономя ресурсы.
  • Параметры placement, theme, animation и delay можно переопределять индивидуально при необходимости.
  • Такой пресет можно использовать для кнопок, ссылок, иконок или любых интерактивных элементов с одинаковым стилем.

Расширение пресетов через функции

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

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

tippy(document.querySelectorAll('.info'), {
  content: (reference) => `Информация о ${reference.dataset.name}`,
  placement: (reference) => reference.dataset.position || 'top',
  animation: 'shift-away',
});

Преимущества такого подхода:

  • Контент тултипа формируется динамически.
  • Расположение (placement) зависит от атрибута data-position.
  • Можно легко создавать сложные логики без создания множества отдельных пресетов.

Комбинирование пресетов

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

const basePreset = {
  animation: 'fade',
  delay: [50, 200],
  theme: 'light'
};

const specialPreset = {
  ...basePreset,
  placement: 'right',
  theme: 'light-border'
};

tippy('.button', specialPreset);

Здесь specialPreset расширяет basePreset, переопределяя только необходимые параметры (placement и theme). Это повышает удобство и снижает количество повторяющихся настроек.

Рекомендации по организации пресетов

  1. Централизация конфигураций — хранить все пресеты в отдельном модуле или объекте.
  2. Использование наследования — базовый пресет для общих параметров, а специализированные пресеты для конкретных групп элементов.
  3. Минимизация дублирования — использовать createSingleton или общий базовый объект для нескольких тултипов.
  4. Динамические функции — применять их для контента и позиционирования, если тултип зависит от состояния элемента.

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

Пресеты особенно полезны для крупных приложений с большим количеством интерактивных элементов:

  • Формы с подсказками по каждому полю.
  • Меню с иконками, где требуется единый стиль тултипов.
  • Дашборды с метками данных и информационными подсказками.

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

Оглавление