Управление событиями touch-устройств

Tippy.js предоставляет мощный и гибкий API для создания всплывающих подсказок, который поддерживает не только классические события мыши (mouseenter, mouseleave, click), но и сенсорные устройства. Взаимодействие с touch-устройствами требует особого подхода, так как стандартные события мыши и сенсора могут конфликтовать.

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

В Tippy.js сенсорные события обрабатываются через следующие механизмы:

  1. touchstart – срабатывает при первом контакте пальца с экраном.
  2. touchend – фиксирует окончание касания.
  3. pointerenter / pointerleave – универсальные события, которые могут заменять классические mouseenter и mouseleave на устройствах с сенсором.
  4. click – часто используется для эмуляции взаимодействия на touch-устройствах, поскольку касание может считаться кликом.

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

Опция touch и управление поведением подсказки

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

tippy('.btn', {
  content: 'Пример подсказки',
  touch: ['hold', 500] // Подсказка появится при удержании 500 мс
});
  • hold – подсказка появляется только при длительном касании.
  • 500 – задержка в миллисекундах перед отображением.

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

Опция interactive на сенсорных устройствах

Если подсказка интерактивная (имеет кнопки, ссылки или формы), нужно учитывать особенность touch-устройств: палец перекрывает контент. Опция interactive: true позволяет подсказке оставаться открытой при касании её области:

tippy('.btn', {
  content: '<button>Нажми меня</button>',
  allowHTML: true,
  interactive: true,
  trigger: 'click'
});

При этом триггер click часто предпочтительнее, чем mouseenter, поскольку на сенсорных устройствах hover невозможен.

Управление множественными касаниями

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

tippy('.btn', {
  content: 'Только для одиночного касания',
  maxTouchPoints: 1
});

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

Использование hideOnClick и touchHold

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

  • hideOnClick: true – скрывает подсказку после первого касания или клика вне элемента.
  • touchHold: true – позволяет удерживать палец для появления подсказки.

Пример:

tippy('.btn', {
  content: 'Держите, чтобы увидеть подсказку',
  touchHold: true,
  hideOnClick: true
});

Это создает поведение, максимально близкое к привычным десктопным hover-эффектам, но адаптированное под сенсорные устройства.

Настройка событий через onTrigger и onUntrigger

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

tippy('.btn', {
  content: 'Подсказка с логикой touch',
  onTrigger(instance, event) {
    if(event.type === 'touchstart') {
      console.log('Начало касания');
    }
  },
  onUntrigger(instance, event) {
    if(event.type === 'touchend') {
      console.log('Конец касания');
    }
  }
});

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

Обработка конфликтов с скроллом и жестами

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

  1. Использовать touchHold с задержкой.
  2. Ограничивать количество одновременных касаний через maxTouchPoints.
  3. Использовать interactive: true только там, где это необходимо.
  4. В случае сложных интерфейсов — комбинировать pointerEvents CSS для предотвращения нежелательных срабатываний.

Резюме ключевых настроек для touch

Опция Назначение
touch Управление появлением подсказки при касании
touchHold Появление только при удержании пальца
interactive Подсказка остается открытой для взаимодействия с контентом
hideOnClick Закрытие подсказки при касании вне элемента
maxTouchPoints Ограничение количества одновременных касаний
onTrigger/onUntrigger Колбэки для обработки начала и окончания касаний

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

Оглавление