Метод update

Метод update является одним из ключевых инструментов управления позиционированием всплывающих элементов в библиотеке Popper.js. Его основная задача — пересчитать координаты поппера относительно целевого элемента (reference) с учётом текущих условий страницы и применённых модификаторов.

Синтаксис

popperInstance.update().then(data => {
  console.log(data);
});
  • popperInstance — экземпляр Popper, созданный через Popper.createPopper(reference, popper, options).
  • Возвращает Promise, который разрешается объектом с текущими вычисленными координатами и информацией о состоянии.

Метод update работает асинхронно, что позволяет учитывать динамические изменения DOM, такие как изменение размеров элементов, скролл или трансформации.

Параметры и возвращаемое значение

Метод update не принимает аргументов. Его использование сводится к вызову функции:

  • Возвращаемое значение: Promise<state>

    • state — объект с текущим состоянием поппера, включающий:

      • placement — текущее направление размещения (top, bottom, left, right и их вариации с -start/-end);
      • modifiersData — данные, переданные модификаторам для корректировки позиционирования;
      • styles — объект CSS-стилей, которые применяются к элементу поппера;
      • attributes — атрибуты для DOM, необходимые для правильного рендеринга.

Пример объекта состояния:

{
  "placement": "bottom-start",
  "modifiersData": {
    "offset": { "x": 0, "y": 10 },
    "preventOverflow": { "x": 0, "y": 0 }
  },
  "styles": {
    "popper": { "position": "absolute", "top": "100px", "left": "200px" },
    "arrow": { "left": "50px" }
  },
  "attributes": {
    "popper": { "data-popper-placement": "bottom-start" }
  }
}

Когда использовать update

  • Динамическое изменение размеров или положения reference Например, при анимации или изменении содержимого целевого элемента.

  • Изменение контекста страницы Скролл контейнера, изменение размеров окна или трансформации родительских элементов.

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

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

import { createPopper } from '@popperjs/core';

const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');

const popperInstance = createPopper(button, tooltip, {
  placement: 'top',
  modifiers: [
    { name: 'offset', options: { offset: [0, 8] } },
    { name: 'preventOverflow', options: { boundary: 'viewport' } }
  ],
});

// Принудительное обновление
popperInstance.update().then(state => {
  console.log('Текущее положение:', state.placement);
  console.log('CSS стили для поппера:', state.styles.popper);
});

Отличие update от forceUpdate

  • update — асинхронный, безопасно учитывает оптимизации производительности и вычисляет координаты только при необходимости.
  • forceUpdate — синхронный, пересчитывает позицию сразу, игнорируя оптимизации. Используется реже, в ситуациях, когда необходима мгновенная реакция без ожидания следующего цикла рендеринга.

Интеграция с модификаторами

Метод update запускает цепочку всех модификаторов, переданных при создании Popper. Это означает:

  • Модификатор offset пересчитывает смещение;
  • Модификатор flip проверяет, не вышел ли поппер за границы и при необходимости меняет placement;
  • Модификатор preventOverflow корректирует положение по границам контейнера.

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

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

  • Вызывать update после любых изменений DOM, влияющих на размеры или положение элементов.
  • Не использовать update в циклах с высокой частотой без необходимости, чтобы избежать лишней нагрузки на рендеринг.
  • Комбинировать с modifiers для динамической подстройки поведения поппера в разных условиях.

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

Оглавление