// Reposition the popup as it is shown or if its size changes
  function reposition() {
    const element = findDialogData();
    if (element) {
      if (popper) {
        popper.scheduleUpdate();
      } else {
        const popperOptions = {
          placement: 'top-start',
          eventsEnabled: false,
          modifiers: {
            preventOverflow: {
              priority: ['bottom', 'top', 'right', 'left']
            },
            flip: {
              behavior: ['top', 'bottom', 'right', 'left']
            },
            offset: {
              offset: '0,5px'
            },
            arrow: {
              element: '.arrow'
            }
          }
        } as any;

        const boundariesElement = $attrs.itemPopupBoundaryClass
          ? document.getElementsByClassName($attrs.itemPopupBoundaryClass)[0]
          : undefined;
        if (boundariesElement) {
          popperOptions.modifiers.preventOverflow.boundariesElement = boundariesElement;
          popperOptions.modifiers.flip.boundariesElement = boundariesElement;
        }

        popper = new Popper(element, dialog[0], popperOptions);
        popper.scheduleUpdate(); // helps fix arrow position
      }
    }
  }

import Popper from 'popper.js';

const reference = document.querySelector('.my-button');
const popper = document.querySelector('.my-popper');
const boundary = document.querySelector('.my-boundary');
const arrow = document.querySelector('.my-arrow');

const thePopper = new Popper(
    reference,
    popper,
);
thePopper.update();
thePopper.scheduleUpdate();
thePopper.destroy();
thePopper.enableEventListeners();
thePopper.disableEventListeners();

Popper.modifiers.forEach(console.log.bind(console));
Popper.placements.forEach(console.log.bind(console));

const thePopperWithOptions = new Popper(
    reference,
    popper,
    {
        placement: 'bottom',
        eventsEnabled: true,
        removeOnDestroy: true,
        modifiers: {
            shift: {
                enabled: true,
                fn: (data) => data,

import Popper from 'popper.js';

var reference = document.querySelector('.my-button');
var thePopper = new Popper(
    reference, {
        content: 'My awesome popper!'
    }
);
thePopper.update();
thePopper.destroy();

var options = {
        placement: 'bottom',
        offset: 0,
        arrowElement: document.querySelector('.arrow'),
        modifiersIgnored: ['applyStyle'],
    } as Popper.PopperOptions;

var thePopperWithOptions = new Popper(
    reference, {
        content: 'My awesome popper!',
    }, options);

var popper = document.querySelector('.my-popper');
var anotherPopper = new Popper(
    reference,
    popper
);

var reference = document.querySelector('.my-button');