Глобальные настройки по умолчанию

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

Настройка глобальных значений через setDefaultProps

Для изменения глобальных настроек используется метод tippy.setDefaultProps(). Он позволяет определить объект с параметрами, который будет автоматически применяться ко всем создаваемым тултипам:

tippy.setDefaultProps({
  placement: 'right',
  animation: 'scale',
  duration: [300, 200],
  arrow: true,
  theme: 'light'
});

В данном примере для всех тултипов будет установлено:

  • placement: 'right' — всплывающие подсказки будут появляться справа от элемента.
  • animation: 'scale' — анимация масштабирования при появлении и исчезновении.
  • duration: [300, 200] — продолжительность анимации появления 300 мс и скрытия 200 мс.
  • arrow: true — стрелка тултипа будет отображаться.
  • theme: 'light' — светлая тема подсказки.

Основные параметры, которые можно задавать глобально

  1. placement — определяет расположение тултипа относительно целевого элемента. Возможные значения:

    • top, bottom, left, right
    • top-start, top-end, bottom-start, bottom-end и т. д.

  2. animation — тип анимации появления и исчезновения:

    • 'fade' — плавное исчезновение
    • 'scale' — масштабирование
    • 'shift-away', 'shift-toward' — смещение с/к элементу

  3. duration — массив [showDuration, hideDuration] или единое число для обеих анимаций.

  4. arrow — отображение стрелки (true / false). Можно использовать кастомные стрелки через CSS.

  5. theme — строка с именем темы. Tippy.js поддерживает кастомные CSS-темы через классы.

  6. delay — задержка перед появлением и скрытием тултипа:

    tippy.setDefaultProps({ delay: [500, 100] });

    Где 500 мс — задержка перед показом, 100 мс — перед скрытием.

  7. interactive — разрешает взаимодействие с содержимым тултипа (true / false). Пример для глобальной настройки всех тултипов с интерактивным содержимым:

    tippy.setDefaultProps({ interactive: true });

Использование глобальных настроек совместно с индивидуальными

Если для отдельного тултипа требуется переопределение некоторых параметров, локальные настройки имеют приоритет над глобальными:

tippy('#myButton', {
  content: 'Кнопка с индивидуальной подсказкой',
  placement: 'bottom', // переопределяет глобальное 'right'
  theme: 'dark'        // отдельная тема
});

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

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

Использование setDefaultProps особенно полезно при большом количестве тултипов на странице:

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

Сброс глобальных настроек

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

tippy.setDefaultProps({});

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

Советы по использованию

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

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

Оглавление