popper跟随鼠标在容器内移动

使用插件：popper.js

https://popper.js.org

HTML

<div id="popper" class="popper-box" v-show="showPopper">{{ popperString }}
    <div class="arrow" v-show="showPopper"></div>
</div>

CSS

.popper-box {
    pointer-events: none;
    display: none;
}
.popper-box:not(:empty) {
    z-index: 200;
    background: #333;
    color: white;
    // font-weight: bold;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    display: block;
    .arrow, .arrow::before {
        position: absolute;
        left: 8px;
        width: 8px;
        height: 8px;
        background: inherit;
    }
    .arrow {
        visibility: hidden;
    }
    .arrow::before {
        visibility: visible;
        content: '';
        transform: rotate(45deg);
    }
}

JS

popperCreate () {
  const virtualElement = {
    getBoundingClientRect: this.generateGetBoundingClientRect()
  }

  const instance = createPopper(virtualElement, document.getElementById('popper'), {
    placement: 'right',
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [-24, -20]
        }
      }
    ]
  })

  this.virtualElement = virtualElement
  this.popperInstance = instance

  const scheduleConatiner = document.getElementById('scheduleConatiner')
  
  scheduleConatiner.addEventListener('mousemove', ({ clientX: x, clientY: y }) => {
    virtualElement.getBoundingClientRect = generateGetBoundingClientRect(x, y);
    instance.update();
  });

  scheduleConatiner.addEventListener('mouseleave', () => {
    this.showPopper = false
  })
},
generateGetBoundingClientRect (x = 0, y = 0) {
  return () => ({
    width: 0,
    height: 0,
    top: y,
    right: x,
    bottom: y,
    left: x
  })
},