Смещение относительно якоря

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

Использование параметра offset

Параметр offset задаётся при инициализации Tooltipster и принимает объект с ключами x и y:

$('.tooltip').tooltipster({
    content: 'Пример подсказки',
    offset: [10, 20] // x = 10px вправо, y = 20px вниз
});
  • x — смещение по горизонтали. Положительное значение перемещает тултип вправо, отрицательное — влево.
  • y — смещение по вертикали. Положительное значение опускает тултип ниже якоря, отрицательное — поднимает выше.

Смещение с учётом направления тултипа

Tooltipster поддерживает разные позиции относительно якоря: top, bottom, left, right. Смещение интерпретируется относительно выбранного направления:

  • Если позиция top, положительное y опускает тултип ниже якоря, отрицательное y поднимает выше.
  • Если позиция bottom, положительное y поднимает тултип выше якоря, отрицательное y — опускает ниже.
  • Для left и right положительное x сдвигает тултип в сторону указанного направления, отрицательное — обратно.

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

$('.tooltip').tooltipster({
    content: 'Всплывающая подсказка',
    side: 'top',
    offset: [0, -15] // поднимаем тултип на 15px выше стандартного положения
});

Динамическое изменение смещения

Смещение можно изменять после инициализации тултипа с помощью метода option:

$('.tooltip').tooltipster('option', 'offset', [5, 10]);

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

Смещение в сочетании с functionPosition

Для более сложного позиционирования используется functionPosition, которая позволяет полностью контролировать координаты тултипа:

$('.tooltip').tooltipster({
    content: 'Динамическая подсказка',
    functionPosition: function(instance, helper, position){
        position.coord.top += 10; // сдвигаем вниз на 10px
        position.coord.left -= 5; // сдвигаем влево на 5px
        return position;
    }
});
  • helper.geo содержит геометрию якоря и тултипа.
  • position.coord — объект с координатами top и left, которые можно изменять.
  • Возвращаемое значение position используется Tooltipster для окончательного размещения подсказки.

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

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

$('.tooltip').tooltipster({
    content: 'Тултип с учётом смещения',
    side: 'right',
    offset: [20, 0], // сдвигаем на 20px вправо
    functionPosition: function(instance, helper, position){
        if(position.coord.left + helper.tooltip.width > $(window).width()){
            position.coord.left = $(window).width() - helper.tooltip.width - 10;
        }
        return position;
    }
});

Практические рекомендации

  • Использовать offset для мелких корректировок: изменение расстояния на несколько пикселей для эстетики.
  • Для сложных сценариев, где необходимо учитывать размеры окна и динамические элементы, применять functionPosition.
  • Проверять положение тултипа на разных разрешениях и при масштабировании страницы, чтобы избежать визуальных пересечений.
  • Сочетать смещение с параметром side для получения предсказуемого расположения относительно якоря.

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

Оглавление