Метод setProps

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

Синтаксис

tippyInstance.setProps(newProps);
  • tippyInstance — объект тултипа, возвращаемый при инициализации Tippy.js.
  • newProps — объект с новыми параметрами конфигурации, которые нужно применить.

Все свойства, передаваемые в newProps, соответствуют стандартной конфигурации Tippy.js. Свойства, не указанные в newProps, остаются без изменений.

Основные возможности

  1. Обновление контента
const tooltip = tippy('#button', {
  content: 'Начальный текст'
});

tooltip.setProps({
  content: 'Обновлённый текст'
});

После вызова setProps тултип сразу отображает новый текст при следующем появлении.

  1. Изменение позиции (placement)
tooltip.setProps({
  placement: 'right'
});

Свойство placement может принимать значения 'top', 'bottom', 'left', 'right' и их модификации ('top-start', 'bottom-end' и т.д.). Это позволяет менять направление тултипа в зависимости от контекста интерфейса.

  1. Изменение триггеров (trigger)
tooltip.setProps({
  trigger: 'mouseenter focus'
});

Свойство trigger определяет события, при которых тултип отображается. Можно комбинировать несколько событий через пробел, например, 'click mouseenter'.

  1. Обновление анимации и темы
tooltip.setProps({
  animation: 'scale',
  theme: 'light'
});
  • animation — задаёт эффект появления тултипа (fade, scale, shift-away и др.).
  • theme — меняет визуальную тему, если она была определена через CSS-классы.

Динамическое обновление сложных конфигураций

setProps поддерживает обновление любых параметров, включая функции:

tooltip.setProps({
  onShow(instance) {
    console.log('Тултип открылся для элемента:', instance.reference);
  },
  delay: [100, 500] // задержка появления и скрытия
});
  • Можно изменять функции обратного вызова (onShow, onHide, onMount, onDestroy), чтобы менять поведение тултипа в реальном времени.
  • Поддерживаются массивы для delay или duration, что позволяет гибко настраивать анимацию.

Обновление контента с функцией

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

tooltip.setProps({
  content: reference => `Текущее время: ${new Date().toLocaleTimeString()}`
});

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

Особенности и рекомендации

  • setProps не пересоздаёт тултип, поэтому все ранее установленные события и состояние остаются прежними.
  • Обновление свойств через setProps применяется к конкретному экземпляру, а не глобально.
  • Для массового изменения конфигурации нескольких тултипов можно хранить их экземпляры в массиве и итерировать:
tooltips.forEach(t => t.setProps({ theme: 'dark' }));
  • Свойства, переданные в setProps, заменяют существующие, а не сливаются. Если нужно сохранить старые значения, их необходимо явно указать вместе с новыми.

Примеры реального использования

  1. Динамическое изменение позиции при изменении размера окна
window.addEventListener('resize', () => {
  tooltip.setProps({
    placement: window.innerWidth > 800 ? 'top' : 'bottom'
  });
});
  1. Изменение содержимого в зависимости от состояния приложения
button.addEventListener('click', () => {
  tooltip.setProps({
    content: isActive ? 'Активно' : 'Неактивно'
  });
});
  1. Изменение темы тултипа для разных элементов интерфейса
const tooltips = tippy('.icon', { theme: 'light' });

tooltips.forEach(t => {
  t.setProps({ theme: t.reference.dataset.theme || 'dark' });
});

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

Оглавление