createPopper(popupElement, refElement, popperOptions) {
    require_condition(popupElement && refElement)

    const { visibleArrow, placement, zIndex, offset, width, ...others } = this._popper_config
    popperOptions = { ...popperOptions, ...others }

    if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(placement)) {
      return;
    }

    const popper = popupElement
    const reference = refElement

    if (!popper || !reference) return;
    if (visibleArrow) this._appendArrow(popper);
    if (this._poperJS) {
      this._poperJS.destroy();
    }

    // these options are perserved only for smooth the migiration from eleme/element
    if (!popperOptions.placement) {
      popperOptions.placement = placement;
    }
    if (!popperOptions.offset) {
      popperOptions.offset = offset;
    }

    popperOptions.onCreate = () => {
      this._resetTransformOrigin();
      this._popper_state.isCreated = true
      this._poperJS.popper.style.zIndex = zIndex
      this._poperJS.popper.style.width = width !== null ? `${width}px` : reference.getBoundingClientRect().width + 'px'
    }

    this._poperJS = new PopperJS(reference, popper, popperOptions);
  }
@param {HTMLElement} popupElement - The reference element used to position the popper.
@param {HTMLElement} refElement - The HTML element used as popper, or a configuration used to generate the popper.
@param {object} popperOptions, PopperJS options