Выравнивание относительно якоря

В Tippy.js позиционирование всплывающих подсказок осуществляется относительно элемента-«якоря» (reference element). Выравнивание определяется с помощью опций placement и расширяется с помощью модификаторов Popper.js, так как Tippy.js использует Popper.js под капотом для точного позиционирования.

Опция placement

placement задаёт начальную ориентацию тултипа относительно якоря. Основные значения:

  • top — над элементом

  • bottom — под элементом

  • left — слева

  • right — справа

  • Комбинации с -start и -end:

    • top-start — над элементом, выравнивание по левому краю
    • top-end — над элементом, выравнивание по правому краю
    • bottom-start — под элементом, по левому краю
    • bottom-end — под элементом, по правому краю
    • left-start — слева, верхний край совпадает с верхним краем якоря
    • left-end — слева, нижний край совпадает с нижним краем якоря
    • right-start — справа, верхний край совпадает с верхним краем якоря
    • right-end — справа, нижний край совпадает с нижним краем якоря

Пример базовой инициализации:

tippy('#button', {
  content: 'Пример подсказки',
  placement: 'top-start',
});

Модификатор offset

Для точной настройки смещения относительно якоря используется опция offset. Она принимает массив [skid, distance]:

  • skid — смещение по основной оси (горизонт для top/bottom, вертикаль для left/right)
  • distance — расстояние от якоря

Пример:

tippy('#button', {
  content: 'Сдвигнутый тултип',
  placement: 'bottom',
  offset: [10, 20], // 10px вдоль оси, 20px от якоря
});

Такое смещение позволяет создавать точные визуальные эффекты без изменения CSS тултипа.

Управление автоматическим переворотом

Опция flip контролирует поведение подсказки, если нет места в видимой области:

tippy('#button', {
  content: 'Автопереворот',
  placement: 'right',
  flip: true, // по умолчанию true
});

Можно указать конкретные направления, в которые допускается переворот:

tippy('#button', {
  content: 'Ограниченный flip',
  placement: 'left',
  popperOptions: {
    modifiers: [
      {
        name: 'flip',
        options: {
          fallbackPlacements: ['top', 'bottom']
        }
      }
    ]
  }
});

Это полезно для точного контроля поведения на страницах с ограниченным пространством.

Привязка к краям якоря с boundary и preventOverflow

Для предотвращения выхода тултипа за видимую область:

  • boundary — задаёт контейнер, в пределах которого тултип остаётся видимым (например, document.body или любой родительский элемент)
  • preventOverflow — модификатор Popper.js, контролирует сдвиг тултипа при нехватке места

Пример:

tippy('#button', {
  content: 'Не выходит за границы',
  placement: 'top',
  popperOptions: {
    modifiers: [
      { name: 'preventOverflow', options: { boundary: document.getElementById('container') } }
    ]
  }
});

Динамическая адаптация к размеру якоря

Tippy.js автоматически вычисляет размеры якоря при открытии тултипа, но при изменении размеров элемента после инициализации можно использовать метод tippyInstance.popperInstance.update():

const instance = tippy('#button', { content: 'Обновление после resize' });
window.addEventListener('resize', () => {
  instance[0].popperInstance.update();
});

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

Использование CSS-переменных для тонкой подстройки позиции

Tippy.js позволяет управлять смещением и выравниванием через CSS-переменные:

  • --tippy-offset: общий отступ от якоря
  • --tippy-arrow-transform: позиция стрелки
  • --tippy-transform-origin: точка трансформации для анимаций

Пример:

.tippy-box {
  --tippy-offset: 12px;
  --tippy-arrow-transform: translateX(5px);
}

Это особенно удобно для единообразного выравнивания тултипов на сайте без изменения JavaScript.

Резюме по выравниванию

  • placement задаёт основное направление и привязку к краям якоря
  • offset позволяет корректировать позицию по оси и расстояние от якоря
  • flip и preventOverflow контролируют поведение при ограниченном пространстве
  • Методы обновления и CSS-переменные обеспечивают динамическое и точное выравнивание

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

Оглавление