Автоматическое переключение позиции

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

Настройка flip

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

tippy('#myButton', {
  content: 'Информация о кнопке',
  placement: 'top',
  flip: true
});
  • flip: true — включает автоматическое переключение позиции на противоположную (например, с top на bottom).
  • flip: false — отключает поведение, тултип всегда будет отображаться в указанной позиции.

Для более гибкой настройки можно указать массив разрешённых позиций:

tippy('#myButton', {
  content: 'Информация о кнопке',
  placement: 'top',
  flip: ['top', 'right', 'bottom', 'left']
});

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

Расширенные параметры flip через Popper.js

Tippy.js использует Popper.js для расчета положения, поэтому все возможности Popper можно применять через опцию popperOptions.

tippy('#myButton', {
  content: 'Информация о кнопке',
  placement: 'top',
  popperOptions: {
    modifiers: [
      {
        name: 'flip',
        options: {
          fallbackPlacements: ['right', 'bottom', 'left'], 
          padding: 8,
          boundary: 'viewport'
        }
      }
    ]
  }
});

Объяснение ключевых параметров:

  • fallbackPlacements — список альтернативных позиций для тултипа при недостатке места.
  • padding — минимальное расстояние между тултипом и границей контейнера.
  • boundary — элемент, в пределах которого проверяется доступное пространство (viewport, scrollParent или конкретный DOM-элемент).

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

Контроль поведения при множественных всплывающих подсказках

Если на странице одновременно несколько элементов с тултипами, важно корректно настроить автоматическое переключение, чтобы они не перекрывали друг друга. Для этого можно комбинировать flip и preventOverflow:

tippy('.info', {
  content: 'Подсказка',
  placement: 'top',
  popperOptions: {
    modifiers: [
      { name: 'flip', options: { fallbackPlacements: ['bottom', 'right'] } },
      { name: 'preventOverflow', options: { padding: 10 } }
    ]
  }
});
  • preventOverflow — не позволяет тултипу выходить за пределы контейнера, даже если flip активен.
  • padding внутри preventOverflow добавляет безопасное расстояние от границ окна или родительского контейнера.

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

Динамическое обновление позиции после изменения DOM

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

const tip = tippy('#myButton', {
  content: 'Информация',
  placement: 'top',
});

document.querySelector('#myButton').addEventListener('click', () => {
  tip[0].popperInstance.update();
});

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

Использование auto для автоматического выбора позиции

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

tippy('#myButton', {
  content: 'Авто-позиция',
  placement: 'auto',
});
  • Tippy будет стараться выбрать позицию, которая минимизирует обрезание контента.
  • При изменении размеров окна тултип автоматически подстраивается, если установлен popperOptions с правильными модификаторами flip и preventOverflow.

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

  1. Использовать flip: true или placement: 'auto' для элементов рядом с краями окна.
  2. Настраивать fallbackPlacements для сложных макетов, чтобы тултипы не перекрывали критичные элементы.
  3. Совмещать flip и preventOverflow для максимальной надежности отображения.
  4. Пересчитывать позицию через popperInstance.update() после динамического изменения размеров контента или контейнера.

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

Оглавление