Автоматическое позиционирование

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

Основные принципы

  1. Выбор позиции по приоритету Tooltipster использует параметр side или functionPosition, чтобы определить предпочтительные стороны (top, bottom, left, right). При включенном автоматическом позиционировании библиотека проверяет доступное пространство вокруг элемента и подбирает оптимальное расположение.

    $('.tooltip').tooltipster({
    content: 'Подсказка с авто-позиционированием',
    side: ['top', 'right', 'bottom', 'left']
});

    Здесь side задает приоритеты: сначала будет проверяться top, если недостаточно места — right, затем bottom, и, наконец, left.

  2. Динамическая подстройка при изменении размеров окна Tooltipster умеет реагировать на изменения окна браузера и пересчитывать позицию тултипа. Это достигается включением параметра viewportAware (по умолчанию включен) и использованием triggerClose при необходимости:

    $('.tooltip').tooltipster({
    content: 'Подсказка, которая подстраивается под экран',
    viewportAware: true,
    triggerClose: {
        scroll: true,
        click: true
    }
});

    Параметр viewportAware: true гарантирует, что тултип не выйдет за границы видимой области.

  3. Использование функции functionPosition для полной кастомизации Для сложных интерфейсов можно задать функцию, которая самостоятельно определяет координаты тултипа:

    $('.tooltip').tooltipster({
    content: 'Кастомная позиция',
    functionPosition: function(instance, helper, position){
        if ($(window).width() < 500) {
            position.side = 'bottom';
        }
        return position;
    }
});

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

Работа с пространством вокруг элемента

Tooltipster учитывает:

  • размеры тултипа (tooltipSize)
  • размеры целевого элемента (originSize)
  • текущие границы видимой области (viewportOffset)
  • смещения, заданные через offsetX и offsetY

Пример использования смещений для тонкой настройки позиции:

$('.tooltip').tooltipster({
    side: ['top', 'bottom'],
    distance: 15,
    offsetX: 10,
    offsetY: -5
});

distance задаёт отступ тултипа от элемента, а offsetX/offsetY позволяют точно подвинуть подсказку без изменения стороны.

Избегание перекрытия контента

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

  • side — список приоритетных сторон
  • functionPosition — кастомная функция, корректирующая положение
  • viewportAware — контроль видимой области
  • minIntersection — минимальное требуемое перекрытие с целевым элементом

Пример с минимальным перекрытием:

$('.tooltip').tooltipster({
    side: ['top', 'bottom', 'left', 'right'],
    minIntersection: 0.3 // тултип должен перекрывать хотя бы 30% элемента
});

Особенности при динамическом контенте

При динамически изменяемом контенте или анимациях можно использовать методы:

  • instance.reposition() — пересчитать позицию тултипа
  • instance.open() с повторной инициализацией позиции
var tooltip = $('.tooltip').tooltipster().tooltipster('instance');
tooltip.content('Новый текст');
tooltip.reposition();

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

Итоговые рекомендации

  • Всегда задавать массив приоритетных сторон через side.
  • Для сложных интерфейсов использовать functionPosition.
  • Включать viewportAware для предотвращения выхода за пределы экрана.
  • Использовать offsetX, offsetY и distance для тонкой подстройки.
  • При динамическом контенте вызывать reposition() после изменения размеров или текста тултипа.

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

Оглавление