Адаптация под мобильные экраны

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

Использование сенсорного триггера

По умолчанию Tippy.js инициируется через события mouseenter и focus. На мобильных устройствах событие hover недоступно, поэтому необходимо использовать сенсорные события:

tippy('.button', {
  content: 'Нажмите, чтобы увидеть подсказку',
  trigger: 'click', // заменяет hover для мобильных устройств
});

Ключевые моменты:

  • trigger: 'click' обеспечивает открытие тултипа при касании.
  • Можно комбинировать с mouseenter focus для десктопов, используя trigger: 'mouseenter focus click'.
  • Для элементов с динамическим содержимым рекомендуется управлять открытием вручную через методы show() и hide().

Адаптивное позиционирование

На маленьких экранах стандартное позиционирование top, bottom, left, right может приводить к обрезанию тултипа. Tippy.js совместим с Popper.js, что позволяет автоматически подбирать оптимальное положение:

tippy('.button', {
  content: 'Тултип с адаптивным позиционированием',
  placement: 'auto', // выбирает оптимальное положение
  fallbackPlacements: ['top', 'bottom', 'left', 'right'],
});

Рекомендации:

  • placement: 'auto' в сочетании с fallbackPlacements предотвращает обрезание подсказки.
  • При необходимости можно ограничить ширину тултипа через CSS:
.tippy-box {
  max-width: 90vw;
}
  • Для всплывающих подсказок с большим содержимым удобнее использовать модальные стили (interactive: true) с прокруткой.

Интерфейсные различия: интерактивность и закрытие

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

tippy('.button', {
  content: 'Интерактивный тултип',
  interactive: true, // позволяет взаимодействовать с элементами внутри тултипа
  trigger: 'click',
  hideOnClick: true, // автоматически закрывает при повторном нажатии
});

Особенности для мобильных устройств:

  • interactive: true предотвращает случайное закрытие при попытке нажать на внутренние элементы тултипа.
  • hideOnClick полезно для однократного взаимодействия и предотвращения «залипания» тултипа на экране.
  • Для сложных форм или контента внутри тултипа можно использовать кастомное событие закрытия, например через onClickOutside.

Оптимизация размера и визуального отображения

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

tippy('.button', {
  content: 'Короткий текст или HTML-содержимое',
  maxWidth: '80vw', // ограничивает ширину
  arrow: true,      // визуальный маркер
});

Советы:

  • maxWidth в процентах от ширины окна предотвращает выход за границы экрана.
  • Размер стрелки (arrow) и отступы можно настроить через CSS:
.tippy-box[data-theme~='light'] {
  padding: 10px;
}
.tippy-arrow {
  width: 8px;
  height: 8px;
}
  • Для контента с изображениями или интерактивными элементами лучше использовать allowHTML: true.

Управление адаптацией через медиа-запросы

В сочетании с CSS и JS можно динамически изменять параметры Tippy.js в зависимости от ширины экрана:

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

tippy('.button', {
  content: 'Адаптивный тултип',
  trigger: isMobile ? 'click' : 'mouseenter focus',
  placement: isMobile ? 'bottom' : 'top',
  maxWidth: isMobile ? '90vw' : '200px',
});

Преимущества подхода:

  • Позволяет полностью менять поведение тултипа на мобильных устройствах.
  • Обеспечивает согласованное UX на десктопах и смартфонах.
  • Можно комбинировать с динамическим обновлением через метод tippyInstance.setProps() при изменении размера экрана.

Динамическое управление состоянием

Для мобильного UX полезно контролировать тултипы программно:

const tip = tippy('.button', {
  content: 'Динамический тултип',
  trigger: 'manual',
});

document.querySelector('.button').addEventListener('click', () => {
  tip.show();
});

Особенности:

  • trigger: 'manual' позволяет открывать и закрывать тултип по любому событию.
  • Можно использовать для контекстных меню или всплывающих подсказок внутри приложений.
  • Хорошо работает в SPA, где элементы могут рендериться динамически.

Итоговая структура мобильной адаптации Tippy.js

  • Использовать click вместо hover.
  • Настраивать placement: auto и fallbackPlacements.
  • Ограничивать ширину через CSS (max-width).
  • Применять interactive: true для взаимодействия внутри тултипа.
  • Управлять открытием через manual при сложной логике.
  • Адаптировать свойства через медиа-запросы или JS.

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

Оглавление