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

// cjs
const { createPopper } = require('@popperjs/core');

// umd
const { createPopper } = Popper;

Usage :

const reference = document.querySelector('#reference');
const popper = document.querySelector('#popper');

createPopper(reference, popper, {

  // options

});

Options :

type Options = {|
  placement: Placement, // "bottom"
  modifiers: Array<$Shape<Modifier<any>>>, // []
  strategy: PositioningStrategy, // "absolute",
  onFirstUpdate?: ($Shape<State>) => void, // undefined
|};

type Placement =
  | 'auto'
  | 'auto-start'
  | 'auto-end'
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'right'
  | 'right-start'
  | 'right-end'
  | 'left'
  | 'left-start'
  | 'left-end';
type Strategy = 'absolute' | 'fixed';

placement : Describes the preferred placement of the popper. Modifiers like flip may change the placement of the popper to make it fit better.

createPopper(reference, popper, {

  placement: 'right-start',

});

The "auto" placements will choose the side with most space.

modifiers : Describes the array of modifiers to add or configure. The default (full) version of Popper includes all modifiers listed in the menu.

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'flip',
      enabled: false,
    },
  ],
});

strategy : Describes the positioning strategy to use. By default, it is absolute, which in the simplest cases does not require repositioning of the popper.

If your reference element is in a fixed container, use the fixed strategy:

createPopper(reference, popper, {

  strategy: 'fixed',

});