Кастомная логика позиционирования

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

Параметр functionPosition

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

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

$('.tooltip').tooltipster({
    functionPosition: function(instance, helper, position){
        // instance – текущий экземпляр Tooltipster
        // helper – объект с информацией о размерах и положении
        // position – объект с предложенной библиотекой позицией
        return position;
    }
});

Структура объектов:

  • helper.geo – геометрия целевого элемента: { width, height, offset: { top, left } }
  • helper.tooltip – размеры подсказки: { width, height }
  • position – стандартная позиция, которую Tooltipster предлагает для использования: { coord: { top, left }, size: { width, height } }

Возвращаемое значение должно быть объектом с полем coord, содержащим новые координаты { top, left }.

Пример смещения подсказки

Можно добавить динамическое смещение подсказки относительно элемента:

$('.tooltip').tooltipster({
    functionPosition: function(instance, helper, position){
        const offsetX = 20; // смещение по горизонтали
        const offsetY = 10; // смещение по вертикали

        position.coord.top += offsetY;
        position.coord.left += offsetX;

        return position;
    }
});

Здесь подсказка будет смещена на 20 пикселей вправо и 10 вниз от стандартного положения.

Условное позиционирование

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

$('.tooltip').tooltipster({
    functionPosition: function(instance, helper, position){
        const windowWidth = $(window).width();
        const windowHeight = $(window).height();

        // если tooltip выходит за правый край
        if(position.coord.left + helper.tooltip.width > windowWidth){
            position.coord.left = windowWidth - helper.tooltip.width - 10;
        }

        // если tooltip выходит за нижний край
        if(position.coord.top + helper.tooltip.height > windowHeight){
            position.coord.top = windowHeight - helper.tooltip.height - 10;
        }

        return position;
    }
});

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

Позиционирование в зависимости от скролла и фиксированных элементов

Иногда подсказка должна учитывать фиксированные элементы, такие как шапка страницы:

$('.tooltip').tooltipster({
    functionPosition: function(instance, helper, position){
        const headerHeight = $('#header').outerHeight() || 0;
        position.coord.top += headerHeight;
        return position;
    }
});

Комбинация с анимацией

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

$('.tooltip').tooltipster({
    animation: 'fade',
    functionPosition: function(instance, helper, position){
        position.coord.top += 15; // смещаем подсказку вниз
        return position;
    }
});

Оптимизация вычислений

  • Кэшировать размеры элементов, если они не изменяются динамически, чтобы уменьшить нагрузку при прокрутке.
  • Использовать условия только для элементов, которые действительно могут выйти за пределы видимой области.
  • Возвращать объект position полностью, даже если меняются только координаты, чтобы Tooltipster корректно применял все остальные параметры (например, размеры и направление стрелки).

Взаимодействие с другими опциями

Кастомное позиционирование можно комбинировать с:

  • side – предпочтительная сторона отображения подсказки (top, bottom, left, right).
  • distance – расстояние между подсказкой и целевым элементом.
  • minWidth / maxWidth – ограничения ширины подсказки.
  • interactive – позволяет взаимодействовать с контентом подсказки (например, кнопками) при кастомном позиционировании.

Пример комплексного позиционирования

$('.tooltip').tooltipster({
    side: 'top',
    distance: 10,
    functionPosition: function(instance, helper, position){
        const scrollTop = $(window).scrollTop();
        const scrollLeft = $(window).scrollLeft();
        const headerHeight = $('#header').outerHeight() || 0;

        position.coord.top = Math.max(scrollTop + headerHeight + 5, position.coord.top);
        position.coord.left = Math.max(scrollLeft + 5, position.coord.left);

        // не выходим за правый и нижний края окна
        const windowWidth = $(window).width();
        const windowHeight = $(window).height();
        if(position.coord.left + helper.tooltip.width > windowWidth){
            position.coord.left = windowWidth - helper.tooltip.width - 5;
        }
        if(position.coord.top + helper.tooltip.height > windowHeight){
            position.coord.top = windowHeight - helper.tooltip.height - 5;
        }

        return position;
    }
});

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

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

Оглавление