Координатное позиционирование

Tippy.js — это современная библиотека для создания всплывающих подсказок, которые могут быть динамически привязаны к элементам DOM. Одним из ключевых аспектов работы с Tippy.js является точное координатное позиционирование всплывающих элементов относительно целевого объекта.

Координатное позиционирование определяется через комбинацию базовых опций библиотеки и возможностей Popper.js, на котором Tippy.js строится.

Свойство placement

Свойство placement задаёт базовую ориентацию подсказки относительно целевого элемента:

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

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

tippy('#button', {
  content: 'Подсказка сверху слева',
  placement: 'top-start'
});

Ключевой момент: placement задаёт только направление, а точная позиция определяется смещениями и поведением модификаторов Popper.js.

Смещение подсказки с помощью offset

Свойство offset позволяет сдвигать подсказку от заданного положения:

tippy('#button', {
  content: 'Сдвинутая подсказка',
  placement: 'bottom',
  offset: [0, 20] // [skidding, distance]
});
  • Skidding — горизонтальное смещение (по оси X для top/bottom и по оси Y для left/right);
  • Distance — расстояние от целевого элемента вдоль основной оси.

Пример: [10, 30] с placement: 'top' означает сдвиг вправо на 10px и поднятие подсказки на 30px выше элемента.

Модификаторы Popper.js

Tippy.js использует Popper.js для точного позиционирования. Основные модификаторы, влияющие на координаты:

  1. flip — автоматический выбор альтернативного положения, если основное не помещается в окно.
  2. preventOverflow — предотвращает выход подсказки за границы контейнера или viewport.
  3. arrow — корректировка позиции стрелки, чтобы она указывала точно на центр целевого элемента.

Пример конфигурации с модификаторами:

tippy('#button', {
  content: 'Подсказка с модификаторами',
  placement: 'right',
  popperOptions: {
    modifiers: [
      {
        name: 'flip',
        options: { fallbackPlacements: ['left', 'top'] }
      },
      { name: 'preventOverflow', options: { padding: 8 } }
    ]
  }
});

Абсолютные координаты с помощью getReferenceClientRect

Для максимального контроля позиционирования можно использовать функцию getReferenceClientRect, возвращающую объект DOMRect, задающий координаты подсказки:

tippy(document.createElement('div'), {
  content: 'Абсолютная позиция',
  getReferenceClientRect: () => ({
    width: 0,
    height: 0,
    top: 100,
    bottom: 100,
    left: 200,
    right: 200
  }),
  placement: 'top'
});

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

Работа с границами и контейнерами

Tippy.js позволяет изменять контекст позиционирования через свойства:

  • appendTo — задаёт контейнер, к которому будет прикреплена подсказка. Например, можно прикреплять к document.body или к конкретному div.
  • boundary (через Popper.js) — определяет ограничивающую область для проверки переполнения.
tippy('#button', {
  content: 'Подсказка с границами',
  placement: 'bottom',
  appendTo: document.body,
  popperOptions: {
    modifiers: [
      { name: 'preventOverflow', options: { boundary: '#container' } }
    ]
  }
});

Ключевой момент: смещение и ограничения работают совместно. Даже при заданном offset подсказка не выйдет за пределы boundary.

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

Tippy.js позволяет менять координаты во время работы приложения через методы:

  • setProps({ placement, offset }) — изменяет положение подсказки на лету;
  • popperInstance.update() — пересчитывает позицию после изменения размеров или положения целевого элемента.

Пример:

const tip = tippy('#button', { content: 'Динамическая подсказка' });
tip.setProps({ placement: 'left', offset: [10, 50] });
tip.popperInstance.update();

Учет прокрутки и масштабирования

Подсказки Tippy.js автоматически учитывают:

  • текущую прокрутку страницы;
  • трансформации родительских элементов (scale, translate).

Однако при нестандартной верстке с transform: scale() или position: fixed может потребоваться явная корректировка через getReferenceClientRect.

Настройка стрелки и точек привязки

Свойство arrow позволяет точно привязать стрелку к целевому элементу. Tippy.js автоматически вычисляет смещение стрелки в зависимости от координат:

tippy('#button', {
  content: 'Подсказка со стрелкой',
  placement: 'top',
  arrow: true
});
  • Стрелка будет оставаться направленной к центру целевого элемента.
  • Смещение стрелки можно настроить через модификатор arrow.padding.

Резюме по координатному позиционированию

  • placement задаёт базовое направление;
  • offset — точное смещение по осям;
  • popperOptions.modifiers — контроль переполнения, переворотов и стрелки;
  • getReferenceClientRect — абсолютные координаты для нестандартных ситуаций;
  • appendTo и boundary — контроль контейнера и границ;
  • Методы setProps и update — динамическая корректировка.

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

Оглавление