Проблемы с позиционированием

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

Пример базовой настройки позиции:

$('.tooltip').tooltipster({
    side: 'top',
    animation: 'fade',
    delay: 200
});

Здесь side: 'top' задаёт приоритетное размещение сверху, но при нехватке пространства Tooltipster может сместить тултип.

Функция functionPosition и её использование

Для более точного контроля позиционирования можно использовать кастомную функцию:

$('.tooltip').tooltipster({
    functionPosition: function(instance, helper, position){
        if ($(window).width() < 600) {
            position.side = 'bottom';
        }
        return position;
    }
});

Параметры функции:

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

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

Проблемы с переполнением и обрезанием тултипов

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

$('.tooltip').tooltipster({
    side: 'top',
    viewportAware: true,
    functionPosition: function(instance, helper, position){
        var scrollTop = $(window).scrollTop();
        if (position.coord.top < scrollTop) {
            position.side = 'bottom';
        }
        return position;
    }
});

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

  • viewportAware: true позволяет автоматически корректировать позицию, чтобы тултип оставался в видимой области.
  • Проверка координат через helper и position даёт возможность программно менять сторону отображения.

Влияние стилей CSS на позиционирование

Некорректные CSS-свойства целевого элемента или контейнера могут привести к неправильному расположению тултипа:

  1. Позиционирование родителя: если родительский элемент имеет position: relative или overflow: hidden, тултип может обрезаться. Решение — использовать appendTo: 'body', чтобы тултип рендерился в корне документа.
$('.tooltip').tooltipster({
    appendTo: 'body'
});
  1. Заданные размеры: фиксированные ширины или высоты тултипа иногда вызывают сдвиги. Лучше использовать maxWidth и minWidth:
$('.tooltip').tooltipster({
    maxWidth: 300
});

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

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

$('.tooltip').tooltipster({
    functionPosition: function(instance, helper, position){
        if ($(window).width() < 480) {
            position.side = 'bottom';
            position.coord.left = $(window).width()/2 - helper.tooltip.width()/2;
        }
        return position;
    }
});

Здесь тултип центрируется по горизонтали, а его сторона смещается вниз для удобства пользователя.

Проблемы с динамическим контентом

Если содержимое тултипа меняется после открытия, позиция может стать некорректной. Решение — использовать метод reposition():

var instance = $('.tooltip').tooltipster().tooltipster('instance');
instance.content('Новое содержимое');
instance.reposition();

reposition() пересчитывает координаты тултипа с учётом нового размера и видимой области.

Основные рекомендации при проблемах с позиционированием

  • Использовать appendTo: 'body' для избежания обрезания.
  • Проверять CSS-свойства родительских элементов (overflow, position).
  • Включать viewportAware: true для автоматической корректировки.
  • Применять functionPosition для кастомных сценариев (адаптивность, динамический контент).
  • Вызывать reposition() после изменения содержимого.

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

Оглавление