Смещения и отступы

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

  • offset — ключевое свойство, которое задаёт смещение тултипа. Оно принимает массив из двух чисел [skidding, distance].

    • Skidding — смещение вдоль основной оси элемента (по горизонтали для top/bottom, по вертикали для left/right).
    • Distance — расстояние между тултипом и целевым элементом.

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

tippy('#button', {
  content: 'Пример смещения',
  placement: 'top',
  offset: [10, 20] // смещение на 10px по оси X и 20px от элемента
});

В этом примере тултип будет смещён на 10 пикселей влево/вправо (в зависимости от направления) и отодвинут на 20 пикселей от целевого элемента.

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

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

tippy('#button', {
  content: 'Динамическое смещение',
  placement: 'right',
  offset: (reference, popper) => {
    return [0, reference.clientWidth / 2];
  }
});

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

Использование модификатора popperOptions

Для более тонкой настройки смещений можно использовать опцию popperOptions, которая передаётся напрямую библиотеке Popper.js, лежащей в основе Tippy.js.

tippy('#button', {
  content: 'Popper Options',
  placement: 'bottom',
  popperOptions: {
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 30] // смещение на 30px вниз
        }
      }
    ]
  }
});

Преимущество такого подхода в том, что можно комбинировать offset с другими модификаторами Popper.js: preventOverflow, flip, arrow, что обеспечивает более гибкое управление позиционированием.

Смещение для стрелки тултипа

Если используется стрелка (arrow: true), важно учитывать, что она тоже влияет на визуальное расположение. Значение distance учитывает высоту стрелки, но иногда требуется дополнительное смещение для идеального выравнивания:

tippy('#button', {
  content: 'Смещение с учетом стрелки',
  placement: 'top',
  arrow: true,
  offset: [0, 15] // отодвигаем тултип дополнительно на 15px
});

Комбинация с placement и flip

Смещения работают совместно с параметрами placement и flip. При автоматическом перевороте (flip: true) Tippy.js сохраняет заданное смещение, корректируя позицию для предотвращения выхода за границы окна:

tippy('#button', {
  content: 'Комбинация смещения и flip',
  placement: 'top',
  offset: [0, 10],
  flip: true
});

Даже если тултип перевернется вниз, отступ 10 пикселей будет соблюден.

Практические советы

  • Для тонкой подгонки лучше использовать функцию в offset, а не фиксированные значения.
  • Учитывать размер стрелки при расчёте distance, иначе тултип будет выглядеть “слишком близко” к элементу.
  • При сложной компоновке страницы с динамическими элементами лучше комбинировать offset и модификатор preventOverflow, чтобы тултип оставался в видимой области.
  • Проверять работу на разных устройствах, так как смещения в пикселях могут выглядеть по-разному на экранах с высокой плотностью пикселей.

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

Оглавление