Работа с границами viewport

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

Свойство boundary

Свойство boundary определяет область, в пределах которой Tippy.js будет пытаться разместить подсказку. По умолчанию это viewport, то есть окно браузера. Допустимые значения:

  • 'viewport' — ограничение подсказки размерами видимой области окна.
  • 'scrollParent' — подсказка будет ограничена ближайшим родителем с прокруткой.
  • HTMLElement — конкретный HTML-элемент, внутри которого подсказка не выйдет за границы.
  • Array<HTMLElement> — массив элементов, подсказка будет учитывать все указанные границы.

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

tippy('#button', {
  content: 'Подсказка рядом с кнопкой',
  boundary: document.querySelector('#container')
});

В этом примере подсказка не выйдет за границы элемента с id container.

Свойство flip

Для автоматического изменения позиции подсказки при приближении к границе viewport используется опция flip. Она интегрируется с Popper.js и позволяет подсказке «переворачиваться» в сторону, где больше пространства.

  • true — подсказка может перевернуться во все доступные направления (top, bottom, left, right).
  • false — запрет автоматического переворота.
  • Array<string> — указание конкретных направлений, в которых разрешено переворачивание.

Пример:

tippy('#button', {
  content: 'Подсказка с переворотом',
  placement: 'top',
  flip: ['bottom', 'right']
});

Подсказка сначала появляется сверху, но если там мало места, она может переместиться вниз или вправо.

Свойство overflow

Для управления поведением подсказки при переполнении контейнера используется опция overflow. Она позволяет выбрать стратегию сдвига или скрытия подсказки:

  • flip — подсказка переворачивается, чтобы оставаться видимой.
  • shift — подсказка смещается по оси, чтобы не выходить за границы.
  • hide — подсказка скрывается, если не помещается в границы.

Пример комбинации с boundary и flip:

tippy('#button', {
  content: 'Смещение при переполнении',
  placement: 'right',
  boundary: document.querySelector('#container'),
  flip: true,
  popperOptions: {
    modifiers: [
      {
        name: 'preventOverflow',
        options: {
          padding: 10
        }
      }
    ]
  }
});

Здесь preventOverflow гарантирует, что подсказка останется видимой с отступом 10px от границ контейнера.

Свойство offset

Даже при правильной конфигурации boundary иногда требуется дополнительный отступ между подсказкой и границей viewport или контейнера. Опция offset задает этот сдвиг в пикселях или через массив [skidding, distance].

tippy('#button', {
  content: 'Подсказка с отступом',
  placement: 'bottom',
  offset: [0, 15]
});

В этом примере подсказка отодвинута на 15px от нижней границы кнопки.

Использование нескольких границ

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

tippy('#button', {
  content: 'Подсказка внутри нескольких границ',
  boundary: [document.querySelector('#container1'), document.querySelector('#container2')]
});

Подсказка будет учитывать пространство обоих контейнеров и не выйдет за их пределы.

Настройка Popper.js через popperOptions

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

  • preventOverflow — ограничивает выход подсказки за границы.
  • flip — задает логику переворота.
  • arrow — управление положением стрелки относительно границы.

Пример:

tippy('#button', {
  content: 'Подсказка с продвинутым контролем границ',
  popperOptions: {
    modifiers: [
      { name: 'preventOverflow', options: { boundary: 'viewport', padding: 8 } },
      { name: 'flip', options: { fallbackPlacements: ['top', 'bottom'] } }
    ]
  }
});

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

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

const tip = tippy('#button', { content: 'Исходная подсказка' });

tip.setProps({
  boundary: document.querySelector('#newContainer'),
  placement: 'left'
});

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

Рекомендации по использованию

  • Для подсказок, расположенных рядом с краями экрана, обязательно задавать boundary и flip.
  • Использовать offset для визуального отступа от границ.
  • В сложных интерфейсах комбинировать boundary с модификаторами Popper.js (preventOverflow, flip) для полной уверенности, что подсказка останется видимой.
  • Для адаптивного позиционирования динамически обновлять свойства с помощью setProps.

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

Оглавление