Условная конфигурация

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

tippy(targets, {
  content: 'Текст подсказки',
  placement: 'top',
  animation: 'fade',
  theme: 'light',
});
  • targets — CSS-селектор, DOM-элемент или массив элементов, к которым привязывается подсказка.
  • content — строка, HTML-элемент или функция, возвращающая контент подсказки.
  • placement — позиция подсказки относительно целевого элемента (top, bottom, left, right, а также комбинации типа top-start).
  • animation — тип анимации появления (fade, scale, shift-away и другие).
  • theme — CSS-тема для стилизации подсказки.

Каждый из этих параметров можно изменять динамически, используя методы экземпляра Tippy.js, например setProps.

Условная конфигурация

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

Использование функций для content

content может быть функцией, возвращающей текст или HTML в зависимости от условий:

tippy('.btn', {
  content: (reference) => {
    return window.innerWidth < 768 ? 'Короткая подсказка' : 'Подсказка с более длинным описанием';
  },
});

Здесь подсказка автоматически изменяет текст в зависимости от ширины окна. Это особенно полезно для адаптивного дизайна.

Динамическая установка placement

Положение подсказки может зависеть от положения элемента на странице:

tippy('.item', {
  placement: (reference) => {
    const rect = reference.getBoundingClientRect();
    return rect.top < 100 ? 'bottom' : 'top';
  },
});

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

Применение условий для тем и анимаций

Можно комбинировать темы и анимации, чтобы подсказка визуально соответствовала контексту:

tippy('.notification', {
  theme: (reference) => reference.classList.contains('error') ? 'error' : 'info',
  animation: (reference) => reference.classList.contains('important') ? 'scale' : 'fade',
});

Подсказка меняет стиль и анимацию в зависимости от класса целевого элемента.

Расширенные опции конфигурации

delay и duration

  • delay — задержка перед появлением и исчезновением подсказки. Может быть массивом [появление, скрытие] или числом для обеих фаз.
  • duration — продолжительность анимации в миллисекундах, также поддерживает массив [появление, скрытие].
tippy('.info', {
  delay: [100, 300],
  duration: [200, 500],
});

trigger

Управляет событиями, которые вызывают показ подсказки:

  • mouseenter, focus, click, manual
  • Можно указывать массив событий: trigger: 'mouseenter focus'

interactive

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

tippy('.dropdown', {
  interactive: true,
});

hideOnClick и sticky

  • hideOnClick — управляет, скрывается ли подсказка при клике внутри или вне элемента.
  • sticky — делает подсказку «приклеенной» к элементу при прокрутке страницы.

Условная инициализация подсказок

Tippy.js допускает создание подсказок только при выполнении определённых условий:

document.querySelectorAll('.feature').forEach(el => {
  if (el.dataset.tooltipEnabled === 'true') {
    tippy(el, { content: el.dataset.tooltipText });
  }
});

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

Методы для изменения конфигурации после инициализации

  • setProps(props) — обновляет свойства подсказки.
  • enable() / disable() — включает или отключает подсказку.
  • destroy() — удаляет подсказку полностью.

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

const tip = tippy('.btn', { content: 'Старый текст' });
tip.setProps({ content: 'Новый текст' });

Комбинация с медиа-запросами

Для адаптивной конфигурации удобно использовать медиазапросы Jav * aScript:

const isMobile = window.matchMedia('(max-width: 768px)').matches;

tippy('.btn', {
  content: isMobile ? 'Мобильная подсказка' : 'Полная подсказка',
  placement: isMobile ? 'bottom' : 'top',
});

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

Обработка событий подсказки

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

  • onShow(instance) — перед показом подсказки
  • onShown(instance) — после появления
  • onHide(instance) — перед скрытием
  • onHidden(instance) — после скрытия

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

tippy('.alert', {
  content: 'Важная информация',
  onShow(instance) {
    if (instance.reference.classList.contains('urgent')) {
      instance.setProps({ theme: 'error' });
    }
  },
});

Эта функциональность позволяет создавать сложное поведение, меняющееся в зависимости от состояния приложения или внешних факторов.

Оглавление