Адаптивные стили

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

Настройка кастомных классов

Для изменения визуального оформления подсказки используется параметр theme или className. При этом Tippy.js позволяет назначать несколько классов одновременно и использовать CSS-переменные для динамического стиля.

tippy('#button', {
  content: 'Подсказка с кастомным стилем',
  theme: 'custom-theme',
  onShow(instance) {
    instance.popper.classList.add('dynamic-style');
  }
});
  • theme — задаёт базовый стиль подсказки. Можно определить несколько тем в CSS и переключать их динамически.
  • onShow и onHidden позволяют добавлять или убирать дополнительные классы в зависимости от состояния.

Адаптивная ширина и высота

Tippy.js автоматически рассчитывает размеры подсказки, но иногда необходимо задать динамическую ширину или максимальную высоту, чтобы подсказка не выходила за границы экрана.

tippy('#input', {
  content: 'Подсказка с адаптивной шириной',
  maxWidth: '300px',
  popperOptions: {
    modifiers: [
      {
        name: 'preventOverflow',
        options: {
          padding: 10
        }
      }
    ]
  }
});
  • maxWidth ограничивает ширину подсказки. Можно использовать проценты (50%) или фиксированные пиксели.
  • preventOverflow гарантирует, что подсказка не выйдет за пределы окна браузера.

Изменение стиля в зависимости от положения

Tippy.js использует Popper.js для позиционирования, что позволяет адаптировать стили в зависимости от стороны появления подсказки.

tippy('#icon', {
  content: 'Tooltip с динамическим стилем',
  onMount(instance) {
    const placement = instance.props.placement;
    if (placement.startsWith('top')) {
      instance.popper.style.backgroundColor = '#f0f8ff';
    } else if (placement.startsWith('bottom')) {
      instance.popper.style.backgroundColor = '#ffe4e1';
    }
  }
});
  • instance.props.placement возвращает текущую позицию подсказки (top, bottom, left, right).
  • Позволяет динамически изменять цвета, тени и границы для улучшения читаемости и соответствия дизайну страницы.

Использование CSS-переменных для динамических эффектов

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

.tippy-box[data-theme~='dynamic'] {
  background-color: var(--tooltip-bg, #333);
  color: var(--tooltip-color, #fff);
  font-size: var(--tooltip-font-size, 14px);
  padding: var(--tooltip-padding, 8px 12px);
}
tippy('#link', {
  content: 'Подсказка с переменными CSS',
  theme: 'dynamic',
  onShow(instance) {
    instance.popper.style.setProperty('--tooltip-bg', '#4caf50');
    instance.popper.style.setProperty('--tooltip-font-size', '16px');
  }
});
  • Использование переменных делает подсказки полностью адаптивными, особенно при смене темы сайта.
  • Позволяет менять размеры, цвета и отступы без пересоздания экземпляра Tippy.

Адаптация при изменении контента

Подсказка может динамически менять содержимое, и Tippy.js корректно подстраивает размеры и положение:

const tooltip = tippy('#dynamic', {
  content: 'Начальный текст',
  allowHTML: true
});

// Обновление текста через секунду
setTimeout(() => {
  tooltip.setContent('Новый текст, более длинный и с <b>HTML</b>');
}, 1000);
  • setContent обновляет содержимое подсказки на лету.
  • Подсказка автоматически перерасчитывает ширину, высоту и позицию для сохранения адаптивности.

Анимации и адаптивные трансформации

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

tippy('#avatar', {
  content: 'Tooltip с анимацией',
  animation: 'shift-away',
  onShow(instance) {
    const width = instance.popper.offsetWidth;
    instance.popper.style.transform = `scale(${Math.min(1, width/200)})`;
  }
});
  • Анимации (fade, shift-away, scale) делают появление подсказки плавным.
  • Динамическая трансформация позволяет подстраивать размер и эффект в зависимости от размеров контента и экрана.

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

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

@media (max-width: 600px) {
  .tippy-box[data-theme~='responsive'] {
    font-size: 12px;
    padding: 6px 10px;
  }
}
tippy('#button', {
  content: 'Подсказка для мобильных',
  theme: 'responsive'
});
  • Позволяет уменьшать размеры текста и отступов на узких экранах.
  • В сочетании с maxWidth и preventOverflow создаёт полностью адаптивное поведение подсказок.

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

Оглавление