Мобильные триггеры

Tooltipster предоставляет гибкую систему управления всплывающими подсказками. В мобильных устройствах ключевым аспектом является ограничение пространства и особенности сенсорного ввода. В отличие от десктопной версии, где основными триггерами являются hover и focus, на мобильных устройствах основным триггером становится tap.

В Tooltipster триггеры задаются через опцию trigger. Для мобильных устройств используются следующие варианты:

$('.tooltip').tooltipster({
    trigger: 'custom',
    triggerOpen: {
        tap: true
    },
    triggerClose: {
        tap: true,
        scroll: true
    }
});
  • triggerOpen — определяет действия, которые открывают подсказку.
  • triggerClose — определяет действия, которые закрывают подсказку.
  • tap — открытие или закрытие подсказки при нажатии на элемент.
  • scroll — закрытие подсказки при прокрутке страницы.

Настройка комбинаций триггеров

На мобильных устройствах часто требуется сочетание нескольких событий для управления подсказкой. Tooltipster позволяет комбинировать события через объектные синтаксис triggerOpen и triggerClose. Например:

$('.tooltip').tooltipster({
    trigger: 'custom',
    triggerOpen: {
        tap: true,
        mouseenter: false
    },
    triggerClose: {
        tap: true,
        scroll: true,
        click: true
    }
});

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

Автоматическое определение мобильного режима

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

var isMobile = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);

$('.tooltip').tooltipster({
    trigger: isMobile ? 'custom' : 'hover',
    triggerOpen: isMobile ? { tap: true } : { mouseenter: true },
    triggerClose: isMobile ? { tap: true, scroll: true } : { mouseleave: true }
});
  • ontouchstart — проверка поддержки сенсорного ввода.
  • navigator.maxTouchPoints — определяет количество поддерживаемых тач-пальцев.
  • Комбинация позволяет настраивать разные триггеры для десктопа и мобильного устройства.

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

  1. Задержка при открытии — на мобильных устройствах важно избегать случайных срабатываний, поэтому рекомендуется использовать опцию delay:
$('.tooltip').tooltipster({
    delay: 200,
    trigger: 'custom',
    triggerOpen: { tap: true },
    triggerClose: { tap: true }
});
  1. Интерактивные подсказки — для элементов с кликабельными ссылками внутри подсказки используется опция interactive: true. Это предотвращает закрытие подсказки при тапе на её содержимое:
$('.tooltip').tooltipster({
    interactive: true,
    trigger: 'custom',
    triggerOpen: { tap: true },
    triggerClose: { tap: true, scroll: true }
});
  1. Закрытие при тапе вне элемента — для улучшения UX важно, чтобы подсказка закрывалась при касании за пределами элемента. Tooltipster автоматически поддерживает этот функционал при использовании tap в triggerClose.

Продвинутые техники

  • Программное управление: открытие и закрытие подсказки через методы .tooltipster('open') и .tooltipster('close') удобно сочетать с мобильными триггерами.
$('.tooltip').on('touchstart', function() {
    $(this).tooltipster('open');
});
  • Комбинация с медиазапросами: можно менять триггеры динамически при изменении ориентации устройства или ширины экрана:
function updateTooltipTriggers() {
    var isMobile = window.innerWidth <= 768;
    $('.tooltip').tooltipster('option', 'trigger', isMobile ? 'custom' : 'hover');
}

$(window).on('resize', updateTooltipTriggers);
updateTooltipTriggers();
  • Контроль многократного открытия: при нескольких подсказках на одной странице полезно отключать открытие других подсказок при тапе на новый элемент. Это достигается через functionReady и методы closeAll:
$('.tooltip').tooltipster({
    trigger: 'custom',
    triggerOpen: { tap: true },
    functionReady: function(instance, helper){
        $('.tooltip').not(helper.origin).tooltipster('close');
    }
});

Вывод

Мобильные триггеры в Tooltipster обеспечивают полноценное взаимодействие с подсказками на сенсорных устройствах, сохраняя гибкость настройки поведения, комбинирования событий и управления открытием/закрытием подсказок программно. Правильная конфигурация triggerOpen и triggerClose, совместно с проверкой сенсорного устройства и дополнительными опциями (interactive, delay), позволяет создавать удобные и отзывчивые интерфейсы для мобильных пользователей.

Оглавление