Фиксированное позиционирование

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

Включение фиксированного позиционирования

Фиксированное позиционирование настраивается через опцию position: 'fixed' и параметр functionPosition. Простейшая конфигурация выглядит так:

$('.tooltip').tooltipster({
    theme: 'tooltipster-light',
    side: 'top',
    animation: 'fade',
    delay: 200,
    trigger: 'hover',
    functionPosition: function(instance, helper, position){
        position.update = true;
        position.fixed = true;
        return position;
    }
});

Ключевые моменты:

  • position.fixed = true — переводит подсказку в фиксированное позиционирование.
  • position.update = true — гарантирует обновление позиции при изменении размера окна или перемещении элемента.
  • Функция functionPosition вызывается каждый раз перед отображением тултипа, что позволяет динамически изменять позицию.

Разница между fixed и absolute

  • Absolute — позиционирование относительно ближайшего позиционированного родителя. При скролле страницы тултип может смещаться вместе с элементом.
  • Fixed — позиционирование относительно окна браузера. Тултип остаётся на месте даже при прокрутке страницы, что полезно для всплывающих подсказок в фиксированных меню, панелях инструментов и overlay-элементах.

Применение с side и distance

Опция side управляет расположением тултипа относительно элемента (top, bottom, left, right). При фиксированном позиционировании необходимо учитывать смещение через distance, чтобы тултип не перекрывал элемент:

$('.tooltip').tooltipster({
    side: 'right',
    distance: 15,
    functionPosition: function(instance, helper, position){
        position.fixed = true;
        return position;
    }
});

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

Динамическое обновление позиции

В реальных интерфейсах элемент может изменять своё положение при изменении контента, размера окна или адаптивной верстке. Tooltipster позволяет динамически пересчитывать позицию:

var instance = $('.tooltip').tooltipster({
    functionPosition: function(instance, helper, position){
        position.fixed = true;
        return position;
    }
}).tooltipster('instance');

$(window).on('resize scroll', function(){
    instance.reposition();
});
  • instance.reposition() — пересчитывает координаты подсказки.
  • Использование события resize и scroll гарантирует, что тултип останется на корректной позиции даже при изменении размеров окна и скролле страницы.

Ограничения и особенности fixed-позиционирования

  1. Контекст z-index — фиксированный тултип выводится поверх всех элементов с обычным позиционированием (relative/absolute). Необходимо контролировать z-index, чтобы не перекрывать важные UI-элементы.
  2. Скролл контейнера — если элемент находится внутри прокручиваемого контейнера с overflow: auto, фиксированный тултип будет оставаться относительно окна, а не контейнера.
  3. Адаптивность — при fixed-позиционировании важно проверять видимость тултипа на мобильных устройствах, чтобы он не выходил за пределы экрана.

Пример комплексного применения

$('.tooltip').tooltipster({
    theme: 'tooltipster-light',
    animation: 'fade',
    delay: 150,
    trigger: 'hover',
    side: 'top',
    distance: 10,
    functionPosition: function(instance, helper, position){
        // фиксируем позицию относительно окна
        position.fixed = true;

        // корректировка для предотвращения выхода за границы экрана
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        if (position.coord.left + position.size.width > windowWidth) {
            position.coord.left = windowWidth - position.size.width - 10;
        }
        if (position.coord.top < 0) {
            position.coord.top = 10;
        }

        return position;
    }
});

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

Фиксированное позиционирование в Tooltipster обеспечивает контроль над расположением подсказки вне зависимости от скролла и структуры DOM, что особенно важно для сложных интерфейсов с overlay-элементами, панелями инструментов и адаптивной версткой. Правильное использование functionPosition, position.fixed и динамических пересчётов позиции позволяет создавать стабильные и предсказуемые всплывающие подсказки.

Оглавление