Отключение на мобильных устройствах

Tooltipster — это мощная библиотека для создания кастомных всплывающих подсказок в JavaScript. В ряде случаев может возникнуть необходимость отключить подсказки на мобильных устройствах, чтобы не мешать пользовательскому интерфейсу и улучшить производительность. В этой статье рассматриваются различные подходы к этой задаче с практическими примерами.

Определение мобильного устройства

Первый шаг — корректно определить, что пользователь работает с мобильным устройством. Существует несколько способов:

1. Использование window.matchMedia

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

Этот метод проверяет ширину экрана и возвращает true для устройств с шириной до 768px. Такой подход удобен для адаптивных интерфейсов.

2. Использование navigator.userAgent

const isMobile = /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.test(navigator.userAgent);

Регулярное выражение проверяет строку userAgent браузера и позволяет определить тип устройства с высокой точностью.

Условная инициализация Tooltipster

После определения устройства можно инициализировать Tooltipster только на десктопах.

if (!isMobile) {
  $('.tooltip').tooltipster({
    theme: 'tooltipster-light',
    animation: 'fade',
    delay: 200,
    trigger: 'hover'
  });
}
  • theme — визуальное оформление подсказки
  • animation — тип анимации при появлении
  • delay — задержка перед показом
  • trigger — событие, которое активирует подсказку (hover, click, custom)

Динамическое отключение и включение

В некоторых случаях может потребоваться включать или отключать Tooltipster при изменении размеров окна. Для этого используется событие resize:

let tooltipInitialized = false;

function manageTooltip() {
  if (!isMobile && !tooltipInitialized) {
    $('.tooltip').tooltipster({
      theme: 'tooltipster-light',
      animation: 'fade',
      delay: 200
    });
    tooltipInitialized = true;
  } else if (isMobile && tooltipInitialized) {
    $('.tooltip').tooltipster('destroy');
    tooltipInitialized = false;
  }
}

window.addEventListener('resize', () => {
  isMobile = window.matchMedia("(max-width: 768px)").matches;
  manageTooltip();
});

manageTooltip();
  • tooltipInitialized — флаг состояния инициализации
  • destroy() — метод Tooltipster для удаления подсказки и очистки событий

Использование опции functionBefore

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

$('.tooltip').tooltipster({
  theme: 'tooltipster-light',
  animation: 'fade',
  functionBefore: function(instance, helper) {
    if (window.matchMedia("(max-width: 768px)").matches) {
      return false; // отменяет показ подсказки
    }
  }
});

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

Отключение всех подсказок одновременно

Для страниц с большим количеством подсказок можно использовать массовое отключение:

if (isMobile) {
  $('.tooltip').tooltipster('destroy');
}

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

Настройка для гибридных сценариев

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

$('.tooltip').tooltipster({
  theme: 'tooltipster-light',
  animation: 'fade',
  trigger: 'hover',
  minWidth: 100,
  maxWidth: 300,
  functionReady: function(instance, helper) {
    if (window.matchMedia("(max-width: 768px)").matches) {
      instance.close(); // принудительное закрытие для мобильных
    }
  }
});
  • functionReady — срабатывает после полной готовности подсказки
  • close() — метод закрытия активной подсказки

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

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

  • Отключение Tooltipster на мобильных устройствах снижает нагрузку на рендеринг и предотвращает конфликты с сенсорными событиями (touchstart, touchend).
  • Массовое уничтожение подсказок освобождает память и предотвращает утечки событий.
  • Использование functionBefore минимизирует создание лишних DOM-элементов для скрытых подсказок.
Оглавление