Наследование и переопределение настроек

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

Глобальные настройки

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

Пример глобальных настроек:

tippy.setDefaultProps({
  placement: 'top',
  theme: 'light',
  delay: [100, 200],
  arrow: true
});

В данном случае:

  • Все тултипы будут отображаться сверху (placement: 'top').
  • Используется светлая тема (theme: 'light').
  • Появление и скрытие подсказки будет с задержкой 100 и 200 мс соответственно.
  • Стрелка будет присутствовать (arrow: true).

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

Локальное переопределение настроек

Каждый отдельный тултип может переопределять глобальные параметры, задавая собственные опции при создании:

tippy('#button1', {
  content: 'Привет, мир!',
  placement: 'bottom', // Переопределение глобального значения
  theme: 'dark'        // Локальная тема
});

В этом примере тултип на #button1 будет отображаться снизу и использовать тёмную тему, несмотря на глобальные настройки.

Ключевой принцип: локальные настройки имеют приоритет над глобальными. Tippy.js выполняет «слияние» объектов настроек, где конкретные свойства тултипа заменяют значения по умолчанию.

Наследование настроек через контейнеры

Если на странице множество элементов с одинаковым поведением, можно создать общий контейнер с набором настроек и применить их ко всем потомкам. Например:

tippy('.tooltip', {
  placement: 'right',
  animation: 'scale',
  duration: [300, 250],
  arrow: true
});

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

Динамическое переопределение

Tippy.js поддерживает динамическое обновление настроек уже существующих тултипов через метод setProps:

const tip = tippy('#dynamic', {
  content: 'Старая подсказка',
  theme: 'light'
});

tip.setProps({
  content: 'Новая подсказка',
  theme: 'dark'
});
  • Содержимое и тема изменяются на лету, без необходимости пересоздавать тултип.
  • Остальные настройки (например, placement и arrow) остаются наследуемыми от исходной конфигурации.

Использование функции props для гибкого наследования

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

tippy('.user', (reference) => ({
  content: `Пользователь: ${reference.dataset.name}`,
  placement: reference.dataset.placement || 'top',
  theme: reference.dataset.theme || 'light'
}));
  • reference — это DOM-элемент, к которому привязан тултип.
  • Можно задавать уникальные параметры для каждого элемента, при этом оставляя часть глобальной конфигурации.

Взаимодействие глобальных и локальных настроек

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

  1. Глобальные настройки (tippy.setDefaultProps) применяются ко всем тултипам.
  2. Настройки при создании (tippy(selector, options)) переопределяют глобальные значения.
  3. Динамические изменения (instance.setProps) изменяют конкретный тултип на лету, сохраняя остальные параметры.

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

Примеры сочетания наследования и переопределения

// Глобальные настройки
tippy.setDefaultProps({
  placement: 'top',
  theme: 'light',
  delay: [50, 150],
  arrow: true
});

// Группа элементов с локальным переопределением
tippy('.btn', {
  placement: 'bottom'
});

// Отдельный элемент с полной локальной конфигурацией
tippy('#special', {
  content: 'Особый тултип',
  placement: 'left',
  theme: 'dark',
  delay: [0, 0],
  arrow: false
});
  • .btn наследует глобальные параметры, но меняет placement.
  • #special полностью переопределяет глобальные настройки.

Важные моменты

  • Локальные настройки не затрагивают другие тултипы.
  • Глобальные параметры можно менять в любой момент, новые тултипы будут использовать обновлённые значения.
  • Методы setProps и функции-конфигураторы позволяют создавать динамические и адаптивные тултипы, которые учитывают состояние элемента и его данные.

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

Оглавление