Viewport для мобильных экранов

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

Определение viewport и его использование

Viewport — это видимая область браузера или экрана устройства. В контексте Tooltipster важно учитывать размеры viewport, чтобы подсказка не перекрывала контент или не выходила за границы экрана.

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

  • maxWidth — максимальная ширина подсказки. Для мобильных устройств рекомендуется задавать меньшие значения (например, 200-280px) для предотвращения горизонтального скролла.
  • minWidth — минимальная ширина, чтобы текст оставался читаемым на узких экранах.
  • viewportAware — опция, которая включает автоматическое смещение tooltip, если он может выйти за пределы viewport. Значение true включает смещение, что критично для мобильных устройств.

Пример конфигурации:

$('.tooltip-element').tooltipster({
    content: 'Подсказка для мобильного экрана',
    maxWidth: 250,
    minWidth: 150,
    side: 'top',
    theme: 'tooltipster-light',
    viewportAware: true,
    functionPosition: function(instance, helper, position){
        // Динамическая корректировка позиции
        if(position.coord.left + position.size.width > $(window).width()){
            position.coord.left = $(window).width() - position.size.width - 10;
        }
        return position;
    }
});

Использование functionPosition для тонкой настройки

Параметр functionPosition позволяет полностью контролировать расположение подсказки. Он принимает три аргумента: instance, helper, position.

  • instance — текущий экземпляр tooltip.
  • helper — объект с информацией о целевом элементе (origin) и контейнере.
  • position — объект с координатами и размерами подсказки, который можно изменять.

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

function adjustTooltipPosition(instance, helper, position){
    let viewportWidth = $(window).width();
    let viewportHeight = $(window).height();

    if(position.coord.left + position.size.width > viewportWidth){
        position.coord.left = viewportWidth - position.size.width - 5;
    }

    if(position.coord.top + position.size.height > viewportHeight){
        position.coord.top = viewportHeight - position.size.height - 5;
    }

    return position;
}

Адаптивные точки останова (media queries)

Для корректной работы на разных экранах можно использовать комбинацию CSS media queries и параметров Tooltipster. Например, менять maxWidth, side и theme в зависимости от ширины экрана:

let tooltipOptions = {
    content: 'Адаптивная подсказка',
    theme: 'tooltipster-light',
    viewportAware: true
};

if(window.innerWidth < 480){
    tooltipOptions.maxWidth = 220;
    tooltipOptions.side = 'bottom';
} else {
    tooltipOptions.maxWidth = 350;
    tooltipOptions.side = 'top';
}

$('.tooltip-element').tooltipster(tooltipOptions);

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

На мобильных устройствах пользователи взаимодействуют через касания, поэтому стоит настроить событие открытия подсказки через tap вместо hover. Tooltipster предоставляет опцию trigger:

$('.tooltip-element').tooltipster({
    trigger: 'custom',
    triggerOpen: {
        tap: true
    },
    triggerClose: {
        tap: true,
        scroll: true
    },
    maxWidth: 240,
    viewportAware: true
});

Работа с прокруткой и фиксированными элементами

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

function positionWithScroll(instance, helper, position){
    let scrollTop = $(window).scrollTop();
    position.coord.top += scrollTop;
    return position;
}

Использование interactive и interactiveTolerance

Чтобы подсказка оставалась интерактивной (например, содержала кнопки или ссылки) на мобильных устройствах, важно включить interactive:

$('.tooltip-element').tooltipster({
    interactive: true,
    interactiveTolerance: 50,
    maxWidth: 260,
    viewportAware: true
});

interactiveTolerance задаёт зону, в пределах которой подсказка не закроется при случайном движении пальца.

Подводные моменты и лучшие практики

  • Минимизировать текст внутри подсказки для мобильного экрана.
  • Всегда проверять поведение при разных ориентациях экрана (portrait/landscape).
  • Использовать адаптивные темы и стили, чтобы текст оставался читаемым.
  • Тестировать на реальных устройствах, так как виртуальные эмуляторы могут не отражать точное поведение viewportAware.

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

Оглавление