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

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

Регистрация глобальных обработчиков

Глобальные обработчики подключаются через метод tippy.setDefaultProps(). Этот метод позволяет задать общие свойства, которые будут применяться ко всем создаваемым тултипам, если не указано иное на уровне конкретного экземпляра.

tippy.setDefaultProps({
  delay: [100, 300],
  arrow: true,
  theme: 'light-border',
});

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

  • delay: [100, 300] — устанавливает задержку показа 100 мс и скрытия 300 мс для всех тултипов.
  • arrow: true — включает стрелку у всех тултипов.
  • theme: 'light-border' — задаёт светлую тему с обводкой.

Глобальные слушатели событий

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

  • onShow(instance) — вызывается перед отображением тултипа.
  • onShown(instance) — после отображения.
  • onHide(instance) — перед скрытием.
  • onHidden(instance) — после скрытия.
  • onMount(instance) — когда тултип добавлен в DOM.
  • onTrigger(instance, event) — срабатывает при инициирующем событии.

Для задания глобального обработчика используют tippy.setDefaultProps() с указанием нужного события:

tippy.setDefaultProps({
  onShow(instance) {
    console.log(`Показывается тултип с контентом: ${instance.props.content}`);
  },
  onHide(instance) {
    console.log(`Скрывается тултип с контентом: ${instance.props.content}`);
  }
});

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

Глобальные обработчики и делегирование

Tippy.js поддерживает делегирование (delegation), что позволяет создавать тултипы на элементах, которые динамически добавляются в DOM. Глобальные обработчики тесно связаны с делегированными тултипами, так как можно задавать стандартное поведение для любых селекторов:

tippy.delegate(document.body, {
  target: '.tooltip',
  content(reference) {
    return reference.getAttribute('data-tooltip');
  },
  delay: [200, 200],
  onShow(instance) {
    console.log(`Делегированный тултип: ${instance.props.content}`);
  }
});

Здесь:

  • target: '.tooltip' — селектор для элементов, к которым будет применяться тултип.
  • content(reference) — функция для динамического определения контента.
  • Глобальные обработчики onShow применяются ко всем делегированным тултипам.

Обновление глобальных обработчиков после инициализации

Если необходимо изменить глобальные обработчики после того, как тултипы уже созданы, можно использовать tippy.setDefaultProps() повторно. Новые тултипы будут использовать обновленные значения, а существующие — останутся без изменений:

tippy.setDefaultProps({
  theme: 'dark',
  onShow(instance) {
    console.log(`Новый глобальный обработчик для: ${instance.props.content}`);
  }
});

Для обновления уже созданного тултипа можно вызвать метод .setProps() на конкретном экземпляре:

const tip = tippy('#myButton', { content: 'Старый контент' });
tip[0].setProps({ content: 'Обновленный контент', theme: 'dark' });

Особенности работы глобальных обработчиков

  1. Наследование свойств — свойства, заданные через setDefaultProps, применяются к новым тултипам, но не изменяют существующие.
  2. Переопределение локально — любые свойства можно переопределить при создании конкретного тултипа. Локальные значения имеют приоритет над глобальными.
  3. Производительность — использование глобальных обработчиков снижает дублирование кода и упрощает поддержку интерфейса с большим количеством тултипов.

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

  • Унификация интерфейса: все тултипы на странице могут иметь одинаковую тему, задержку и стиль.
  • Логирование событий: глобальный onShow и onHide позволяют вести статистику взаимодействий.
  • Динамический контент: с делегированием можно создавать тултипы для элементов, которые появляются после загрузки страницы, без необходимости регистрировать каждый отдельно.

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

Оглавление