Touch события

Tippy.js — это мощная библиотека для создания подсказок (tooltip) и всплывающих элементов в JavaScript. Одним из важных аспектов интерактивного интерфейса является корректная работа с сенсорными устройствами. Touch-события требуют отдельного подхода, так как стандартное поведение hover или focus не всегда работает на мобильных устройствах.

Основные touch-события

Tippy.js поддерживает стандартные события браузера, такие как:

  • touchstart — срабатывает при первом касании элемента.
  • touchend — срабатывает при отпускании пальца.
  • touchmove — фиксирует движение пальца по экрану.
  • touchcancel — срабатывает, если текущее касание было прервано системой.

Для большинства сценариев достаточно обрабатывать touchstart и touchend, чтобы инициировать открытие и закрытие подсказки.

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

В Tippy.js поведение событий определяется через опцию trigger. По умолчанию Tippy использует 'mouseenter focus'. Для корректной работы на touch-устройствах следует добавить 'click' или 'manual', либо использовать специальное событие touch:

tippy('#element', {
  content: 'Подсказка для touch',
  trigger: 'mouseenter focus click',
  interactive: true,
});

Использование 'click' позволяет имитировать hover для touch-устройств: первый тап открывает подсказку, второй тап — закрывает.

Детектирование устройства

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

const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;

tippy('#element', {
  content: 'Подсказка для touch',
  trigger: isTouchDevice ? 'click' : 'mouseenter focus',
});

Это позволяет избежать лишних кликов на десктопных устройствах и сохраняет естественный hover на компьютерах.

Опция touch и её поведение

Tippy.js поддерживает опцию touch, которая контролирует поведение подсказки при touch-событиях:

tippy('#element', {
  content: 'Тест',
  touch: ['hold', 500],
});
  • 'hold' — подсказка открывается только при длительном удержании (по умолчанию 500 мс).
  • true — включает стандартное открытие по touch.
  • false — отключает все touch-открытия.

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

Использование интерактивных подсказок на touch

Для интерактивных элементов (кнопки внутри подсказки, ссылки) необходимо включить опцию interactive: true и корректно обработать события touch:

tippy('#button', {
  content: '<button>Действие</button>',
  allowHTML: true,
  interactive: true,
  trigger: 'click',
});

С опцией interactive: true всплывающий элемент не закрывается при клике внутри него, что позволяет удобно работать с формами и кнопками на touch-устройствах.

Проблемы с закрытием подсказки на мобильных устройствах

На сенсорных экранах часто возникает проблема: подсказка не закрывается после касания вне элемента. Для решения используется опция hideOnClick:

tippy('#element', {
  content: 'Тест',
  trigger: 'click',
  hideOnClick: true, // Подсказка закрывается при клике вне элемента
});

Если требуется полностью контролировать поведение, можно использовать trigger: 'manual' и открывать/закрывать подсказку через методы show(), hide() и toggle():

const tip = tippy('#element', { content: 'Тест', trigger: 'manual' });

document.querySelector('#element').addEventListener('touchstart', () => {
  tip[0].show();
});
document.addEventListener('touchstart', (event) => {
  if (!event.target.closest('#element')) {
    tip[0].hide();
  }
});

Особенности совместимости с мобильными браузерами

  • iOS Safari может блокировать всплытие событий click после touchstart без preventDefault().
  • Android Chrome корректно работает с touchstart и click, но иногда требует дебаунс для предотвращения двойного срабатывания.
  • Длительное удержание (hold) удобно для открытия подсказок без конфликтов с обычным скроллом страницы.

Резюме по настройке touch-событий

  • Использовать trigger: 'click' для имитации hover на touch-устройствах.
  • Проверять сенсорное устройство через ontouchstart или navigator.maxTouchPoints.
  • Включать interactive: true для интерактивного контента.
  • Опция touch: ['hold', 500] позволяет избежать случайного открытия.
  • При необходимости использовать trigger: 'manual' для полного контроля открытия и закрытия.

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

Оглавление