Responsive стилизация

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

Использование кастомных CSS-классов

Каждая подсказка в Tippy.js может быть снабжена собственным CSS-классом через опцию theme или popperOptions. Основная практика для responsive стилей:

tippy('.tooltip', {
  content: 'Пример подсказки',
  theme: 'custom-tooltip',
});

Далее в CSS можно определить стили для разных размеров экрана:

.custom-tooltip {
  font-size: 14px;
  padding: 8px 12px;
  max-width: 200px;
}

@media (min-width: 768px) {
  .custom-tooltip {
    font-size: 16px;
    padding: 10px 15px;
    max-width: 300px;
  }
}

@media (min-width: 1200px) {
  .custom-tooltip {
    font-size: 18px;
    padding: 12px 18px;
    max-width: 400px;
  }
}

Таким образом, одна и та же подсказка может динамически изменять размеры, шрифты и отступы в зависимости от ширины экрана.

Адаптивные позиции подсказок

Tippy.js использует Popper.js для вычисления позиции всплывающих элементов. Опция placement задает первоначальное расположение подсказки, а flip и boundary позволяют автоматически менять позицию при нехватке места:

tippy('.tooltip', {
  content: 'Подсказка с адаптивной позицией',
  placement: 'top',
  flip: true,
  boundary: 'viewport'
});

Для responsive можно динамически менять placement через JavaScript, учитывая размер окна:

const updatePlacement = () => {
  const placement = window.innerWidth < 768 ? 'bottom' : 'top';
  tippy('.tooltip', { placement });
};

window.addEventListener('resize', updatePlacement);
updatePlacement();

Контроль размеров подсказки через maxWidth

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

tippy('.tooltip', {
  content: 'Ширина подсказки подстраивается под экран',
  maxWidth: 250
});

Для responsive эффектов maxWidth можно изменять динамически:

function getMaxWidth() {
  if (window.innerWidth < 576) return 150;
  if (window.innerWidth < 992) return 250;
  return 400;
}

tippy('.tooltip', {
  content: 'Adaptive tooltip',
  maxWidth: getMaxWidth()
});

window.addEventListener('resize', () => {
  tippy('.tooltip').forEach(instance => {
    instance.setProps({ maxWidth: getMaxWidth() });
  });
});

Использование tippy.setProps для динамического изменения стилей

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

const tip = tippy('.tooltip', {
  content: 'Подсказка с изменяемым контентом и стилем',
});

function updateTooltipStyle() {
  const fontSize = window.innerWidth > 768 ? '16px' : '12px';
  tip[0].setProps({
    onShow(instance) {
      instance.popper.querySelector('.tippy-content').style.fontSize = fontSize;
    }
  });
}

window.addEventListener('resize', updateTooltipStyle);
updateTooltipStyle();

Темы и кастомизация через CSS-переменные

Tippy.js поддерживает темы, которые можно задавать через CSS-переменные. Это позволяет создавать полностью адаптивный внешний вид без изменения JavaScript-кода:

.tippy-box[data-theme~='responsive'] {
  --tippy-font-size: 14px;
  --tippy-padding: 8px 12px;
}

@media (min-width: 768px) {
  .tippy-box[data-theme~='responsive'] {
    --tippy-font-size: 16px;
    --tippy-padding: 10px 15px;
  }
}

@media (min-width: 1200px) {
  .tippy-box[data-theme~='responsive'] {
    --tippy-font-size: 18px;
    --tippy-padding: 12px 18px;
  }
}

Подключение темы:

tippy('.tooltip', {
  content: 'Responsive Tippy',
  theme: 'responsive'
});

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

Динамическое управление содержимым

Контент подсказки также может быть responsive, например, показывать короткий текст на мобильных и расширенный на десктопах:

tippy('.tooltip', {
  content: () => window.innerWidth < 768 ? 'Короткий текст' : 'Подробное описание для больших экранов',
  allowHTML: true
});

window.addEventListener('resize', () => {
  tippy('.tooltip').forEach(instance => instance.setContent(
    window.innerWidth < 768 ? 'Короткий текст' : 'Подробное описание для больших экранов'
  ));
});

Итоговые рекомендации

  • Использовать кастомные классы и CSS-переменные для responsive стилизации.
  • Контролировать позицию и размеры через placement, flip, maxWidth и setProps.
  • Динамически менять контент и стили через JavaScript при изменении размера окна.
  • Сочетать медиазапросы с возможностями Tippy.js для полного контроля адаптивности.

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

Оглавление