Позиционирование относительно viewport

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

Основные параметры позиционирования

Tooltipster использует концепцию «модификаторов позиции» для контроля того, где тултип появится относительно целевого элемента и viewport:

  • side — указывает сторону, на которой тултип должен отображаться (top, bottom, left, right).
  • distance — задает расстояние между тултипом и элементом-таргетом.
  • functionPosition — функция обратного вызова, позволяющая динамически корректировать позицию перед рендером тултипа.

Пример базовой конфигурации:

$('.tooltip').tooltipster({
    side: 'top',
    distance: 10,
    functionPosition: function(instance, helper, position){
        // position содержит рассчитанные координаты тултипа
        return position;
    }
});

Автоматическая подгонка под viewport

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

  • viewportAware — ключевой параметр, который активирует проверку позиции тултипа относительно viewport.
  • minIntersection — минимальное количество пикселей, которое тултип должен находиться внутри окна браузера.

Пример использования:

$('.tooltip').tooltipster({
    side: 'right',
    viewportAware: true,
    minIntersection: 16
});

При этом библиотека автоматически смещает тултип так, чтобы он оставался видимым, даже если элемент находится у края окна.

Точный контроль через functionPosition

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

function customPosition(instance, helper, position){
    const tooltipHeight = position.size.height;
    const tooltipWidth = position.size.width;
    const windowHeight = $(window).height();
    const windowWidth = $(window).width();

    // Сдвиг тултипа вниз, если он вылезает за верх окна
    if(position.coord.top < 0){
        position.coord.top = 0;
    }

    // Сдвиг тултипа влево, если он вылезает за правый край
    if(position.coord.left + tooltipWidth > windowWidth){
        position.coord.left = windowWidth - tooltipWidth;
    }

    return position;
}

$('.tooltip').tooltipster({
    side: 'top',
    functionPosition: customPosition
});

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

Изменение положения при изменении размеров окна

Чтобы тултип оставался корректно позиционированным при ресайзе окна или скролле, используется метод reposition:

$(window).on('resize scroll', function(){
    $('.tooltip').tooltipster('reposition');
});

Это гарантирует, что тултип динамически подстраивается под текущее положение таргета и границы viewport.

Комбинация сторон и автоматического смещения

Tooltipster позволяет задавать несколько предпочтительных сторон через массив, чтобы библиотека автоматически выбирала наиболее подходящую:

$('.tooltip').tooltipster({
    side: ['top', 'right', 'bottom', 'left'],
    viewportAware: true
});

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

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

На маленьких экранах важно учитывать не только размеры viewport, но и прокрутку страницы. Параметры functionPosition и viewportAware в сочетании с динамическим пересчетом позиции при событиях scroll и resize обеспечивают корректное поведение тултипов на мобильных устройствах.

$('.tooltip').tooltipster({
    side: 'bottom',
    viewportAware: true,
    functionPosition: function(instance, helper, position){
        const scrollTop = $(window).scrollTop();
        position.coord.top = Math.max(position.coord.top, scrollTop + 5);
        return position;
    }
});

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

Резюме механизмов позиционирования

  • side и массив предпочтительных сторон контролируют начальное расположение.
  • distance определяет отступ от таргета.
  • viewportAware и minIntersection защищают тултип от выхода за пределы окна.
  • functionPosition даёт полный контроль над координатами.
  • Методы reposition и обработка событий resize/scroll поддерживают адаптивность.

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

Оглавление