Сенсорные события

Tooltipster — это мощная библиотека для создания всплывающих подсказок на веб-странице с поддержкой разнообразных настроек и событий. В контексте сенсорных устройств важно учитывать особенности взаимодействия с элементами через касания, так как обычные события мыши (mouseenter, mouseleave) не всегда срабатывают корректно.

Подключение сенсорной поддержки

Tooltipster поддерживает сенсорные устройства из коробки, но для полного контроля над поведением всплывающих подсказок можно использовать опцию touchDevices. По умолчанию она установлена в true, что позволяет библиотеке автоматически обрабатывать события касания (touchstart, touchend).

$('.tooltip').tooltipster({
    touchDevices: true,
    trigger: 'hover'
});

Примечание: trigger: 'hover' на сенсорных устройствах преобразуется в поведение по первому касанию. Если необходимо полностью контролировать открытие, следует использовать trigger: 'custom'.

Использование событий касания

Для сенсорных устройств основной механизм открытия подсказки — событие touchstart. Однако стандартное поведение браузера может конфликтовать с обработкой всплывающих подсказок. Tooltipster предоставляет возможность перехватывать эти события и предотвращать их дефолтное действие:

$('.tooltip').on('touchstart', function(e) {
    e.preventDefault(); // предотвращает стандартное поведение, например, скролл
    $(this).tooltipster('open');
});

Также важно учитывать touchend для закрытия подсказки:

$('.tooltip').on('touchend', function() {
    $(this).tooltipster('close');
});

Настройка автоматического закрытия на сенсорных устройствах

Tooltipster поддерживает опцию delay для сенсорных устройств, что позволяет задать задержку закрытия подсказки после касания:

$('.tooltip').tooltipster({
    delay: 300, // время в миллисекундах
    trigger: 'hover',
    touchDevices: true
});

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

Сенсорные события и динамический контент

Для элементов, которые создаются динамически, необходимо инициировать Tooltipster после добавления в DOM. Сенсорные события можно обрабатывать через делегирование:

$(document).on('touchstart', '.tooltip', function(e) {
    e.preventDefault();
    $(this).tooltipster('open');
});

Это гарантирует корректное срабатывание подсказок на всех новых элементах.

Комбинация сенсорных и мышиных событий

Tooltipster позволяет комбинировать сенсорные и мышиные события для адаптивного поведения:

$('.tooltip').tooltipster({
    trigger: 'hover',
    interactive: true, // позволяет взаимодействовать с содержимым подсказки
    touchDevices: true
});

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

Настройка закрытия при клике вне подсказки

Для сенсорных устройств удобно закрывать подсказку при тапе вне элемента. Tooltipster предоставляет событие close и метод closeAll:

$(document).on('touchstart', function(e) {
    if (!$(e.target).closest('.tooltip, .tooltipster-box').length) {
        $('.tooltip').tooltipster('close');
    }
});

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

Обработка жестов и мульти-тач

Tooltipster не поддерживает сложные жесты по умолчанию (например, свайпы), но базовую защиту от случайного закрытия при мульти-тачах можно реализовать с помощью проверки e.touches.length:

$('.tooltip').on('touchstart', function(e) {
    if (e.touches.length === 1) {
        $(this).tooltipster('open');
    }
});

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

Резюме по сенсорным событиям

  • touchstart — открытие подсказки;
  • touchend — закрытие подсказки;
  • delay — предотвращение случайного закрытия;
  • interactive: true — поддержка взаимодействия с содержимым;
  • Делегирование и проверка мульти-тач обеспечивают корректное поведение на динамических и сенсорных интерфейсах.

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

Оглавление