Создание собственных плагинов

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

Структура плагина

Базовый плагин в Tippy.js представляет собой объект с обязательными и опциональными полями:

const myPlugin = {
  name: 'myPlugin',       // уникальное имя плагина
  defaultValue: false,    // значение по умолчанию для опции
  fn(instance) {          // функция, вызываемая при инициализации тултипа
    return {
      onCreate() {},      // вызывается при создании тултипа
      onShow() {},        // вызывается при показе
      onHide() {},        // вызывается при скрытии
      onDestroy() {}      // вызывается при уничтожении
    };
  }
};
  • name — уникальный идентификатор плагина, который используется для добавления и настройки.
  • defaultValue — начальное значение опции, которая может быть передана при инициализации тултипа.
  • fn(instance) — функция, получающая объект тултипа и возвращающая методы жизненного цикла, которые будут автоматически привязаны к соответствующим событиям.

Методы жизненного цикла

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

  • onCreate(instance) — вызывается один раз при создании тултипа. Используется для добавления пользовательских элементов DOM или начальной конфигурации.
  • onShow(instance) — срабатывает при каждом отображении тултипа. Может применяться для динамического обновления контента.
  • onHide(instance) — вызывается перед скрытием тултипа. Часто используется для анимаций или очистки ресурсов.
  • onDestroy(instance) — вызывается при удалении тултипа. Здесь можно удалять созданные элементы и отменять подписки на события.

Каждый из этих методов получает ссылку на объект тултипа instance, через который можно управлять содержимым, состоянием и DOM-структурой.

Использование пользовательских опций

Плагины могут определять свои собственные опции, которые будут доступны при инициализации тултипа. Для этого используется поле defaultValue и объект instance.props:

const highlightPlugin = {
  name: 'highlight',
  defaultValue: 'yellow',
  fn(instance) {
    return {
      onShow() {
        instance.popper.querySelector('.tippy-content').style.backgroundColor = instance.props.highlight;
      }
    };
  }
};

tippy('.btn', {
  content: 'Подсказка',
  plugins: [highlightPlugin],
  highlight: 'lightgreen'
});

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

Взаимодействие с другими плагинами

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

const pluginA = {
  name: 'pluginA',
  fn(instance) {
    return {
      onShow() {
        console.log('Plugin A activated');
      }
    };
  }
};

const pluginB = {
  name: 'pluginB',
  fn(instance) {
    return {
      onShow() {
        console.log('Plugin B activated');
      }
    };
  }
};

tippy('.btn', {
  content: 'Подсказка',
  plugins: [pluginA, pluginB]
});

При показе тултипа будут вызваны оба метода onShow, что обеспечивает совместимость и расширяемость.

Динамическая регистрация плагинов

Плагины можно регистрировать глобально или передавать локально для конкретного тултипа. Для глобальной регистрации используется метод tippy.setDefaultProps:

tippy.setDefaultProps({
  plugins: [highlightPlugin]
});

После этого все создаваемые тултипы будут автоматически использовать этот плагин без необходимости указывать его в каждом вызове tippy().

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

  1. Всегда давать плагину уникальное имя, чтобы избежать конфликтов.
  2. Стараться использовать методы жизненного цикла для изменения DOM, а не прямые манипуляции вне тултипа.
  3. Проверять совместимость опций и плагинов, особенно если они управляют анимациями или стилями.
  4. Минимизировать влияние плагина на основной код тултипа, чтобы сохранить предсказуемость поведения.

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

Оглавление