Параметры границ и overflow

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

Параметр boundary

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

Возможные значения:

  • viewport — ограничение относительно видимой области окна браузера.
  • scrollParent — ограничение относительно ближайшего скроллируемого родителя.
  • DOM-элемент — пользовательский контейнер, относительно которого позиционируется тултип.

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

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

Особенности:

  • Использование boundary совместимо с Popper.js modifiers, которые управляют предотвращением выхода за пределы контейнера (preventOverflow).
  • Если границы не заданы, тултип может выходить за пределы видимой области.

Параметр overflow

В Tippy.js нет прямого параметра overflow, однако управление переполнением осуществляется через Popper.js модификаторы. Основной модификатор — preventOverflow.

preventOverflow

Описание: Не позволяет тултипу выйти за пределы заданного контейнера (boundary). Работает вместе с boundary и позиционированием через Popper.js.

Настройки:

  • mainAxis — предотвращает выход тултипа по основной оси (в направлении позиции, например, top, bottom).
  • altAxis — предотвращает выход тултипа по второстепенной оси.
  • tether — если true, тултип будет “прилипать” к границе контейнера при переполнении; если false, тултип может сдвигаться.

Пример:

tippy('#button', {
  content: 'Тултип с контролем переполнения',
  popperOptions: {
    modifiers: [
      {
        name: 'preventOverflow',
        options: {
          boundary: 'viewport',
          mainAxis: true,
          altAxis: true,
          tether: true
        }
      }
    ]
  }
});

Особенности:

  • tether: false позволяет тултипу уходить за границы контейнера, если это необходимо для сохранения видимости.
  • Настройка altAxis: true полезна для горизонтальных тултипов, чтобы они не вылезали за границы слева или справа.

Комбинация boundary и flip

Для сложных интерфейсов важно учитывать не только переполнение, но и автоматическую смену позиции тултипа. Модификатор flip позволяет тултипу адаптироваться при недостатке места:

tippy('#button', {
  content: 'Тултип с flip и boundary',
  popperOptions: {
    modifiers: [
      {
        name: 'flip',
        options: {
          fallbackPlacements: ['top', 'bottom', 'left', 'right'],
          boundary: document.querySelector('#container')
        }
      },
      {
        name: 'preventOverflow',
        options: {
          boundary: document.querySelector('#container')
        }
      }
    ]
  }
});

Вывод:

  • boundary задает рамки видимости тултипа.
  • preventOverflow контролирует переполнение внутри этих границ.
  • flip позволяет тултипу менять позицию при нехватке места.

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

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

  1. Для модальных окон и скроллируемых контейнеров всегда задавать boundary как родительский элемент.
  2. Для fullscreen интерфейсов использовать viewport как границу.
  3. Если требуется точное позиционирование без сдвига тултипа при переполнении, установить tether: false.
  4. Комбинация flip + preventOverflow — лучший подход для адаптивных интерфейсов, когда пространство может изменяться динамически.

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

Оглавление