Динамическая генерация стилей

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

Использование опции theme для динамических стилей

Каждый тултип в Tippy.js может иметь собственную тему, определяемую через опцию theme. Тема может быть как строкой с заранее заданным классом, так и динамически формируемым значением.

tippy('.button', {
  content: 'Динамический стиль',
  theme: 'custom-theme',
});

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

const userTheme = 'user-' + Math.floor(Math.random() * 100);
tippy('.button', {
  content: 'Пользовательская тема',
  theme: userTheme
});

В CSS создаются соответствующие классы:

.tippy-box[data-theme~='user-42'] {
  background-color: #f0ad4e;
  color: white;
  border-radius: 8px;
}

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

Настройка через onShow и onMount

Tippy.js поддерживает колбэки жизненного цикла тултипа. Для динамического изменения стилей можно использовать onShow и onMount:

tippy('.button', {
  content: 'Стили при показе',
  onShow(instance) {
    const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
    instance.popper.style.backgroundColor = randomColor;
  }
});

Здесь instance.popper позволяет напрямую изменять DOM-элемент тултипа, включая цвета, размеры, тени и анимации. Такой способ особенно полезен при создании интерактивных или контекстно-зависимых подсказок.

Интеграция с CSS-переменными

Для более масштабируемого подхода рекомендуется использовать CSS-переменные. Это позволяет задавать динамические значения стилей через JavaScript, оставляя большую часть визуальной логики в CSS.

.tippy-box[data-theme~='dynamic'] {
  background-color: var(--tooltip-bg, #333);
  color: var(--tooltip-color, #fff);
  border-radius: var(--tooltip-radius, 4px);
}
tippy('.button', {
  content: 'CSS-переменные',
  theme: 'dynamic',
  onMount(instance) {
    const color = '#' + Math.floor(Math.random() * 16777215).toString(16);
    instance.popper.style.setProperty('--tooltip-bg', color);
  }
});

Такой подход упрощает поддержку и расширение стилей, особенно когда требуется единая визуальная система для множества тултипов.

Динамические анимации и переходы

Tippy.js поддерживает встроенные анимации (fade, scale, shift-away) и позволяет создавать собственные через CSS. Для динамической генерации анимаций удобно комбинировать классы и CSS-переменные:

.tippy-box[data-theme~='animated'] {
  transition: transform var(--tooltip-duration, 300ms) ease-out,
              opacity var(--tooltip-duration, 300ms) ease-out;
}
tippy('.button', {
  content: 'Динамическая анимация',
  theme: 'animated',
  onShow(instance) {
    const duration = Math.floor(Math.random() * 500) + 200 + 'ms';
    instance.popper.style.setProperty('--tooltip-duration', duration);
  }
});

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

Использование popperProps для управления позиционированием

Динамические стили часто включают изменения не только визуальной части, но и позиционирования. Через popperProps можно изменять отступы, смещения и поведение тултипа:

tippy('.button', {
  content: 'Смещение тултипа',
  popperProps: {
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, Math.floor(Math.random() * 50)]
        }
      }
    ]
  }
});

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

Генерация цветовых схем и градиентов

Для сложных интерфейсов удобно создавать цветовые схемы динамически:

tippy('.button', {
  content: 'Градиентный тултип',
  onShow(instance) {
    const startColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
    const endColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
    instance.popper.style.background = `linear-gradient(45deg, ${startColor}, ${endColor})`;
  }
});

Градиенты можно комбинировать с CSS-переменными для изменения направления, угла и прозрачности, обеспечивая полную свободу дизайна без необходимости создавать десятки статических классов.

Динамическая генерация через функции контента

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

tippy('.button', {
  content(reference) {
    const width = reference.offsetWidth * 1.5;
    return `<div style="width:${width}px; text-align:center;">Динамический контент</div>`;
  },
  allowHTML: true
});

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

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

Оглавление