嘿，我懂官方文档有时候确实绕得让人头大，我来一步步帮你搞定这两个问题！

一、更新Popper元素的X/Y位置 #

首先，你得保存Popper实例的引用，这是调用API操作的关键：

const refEl = document.getElementById('ref');
const popEl = document.getElementById('pop');
// 把实例存下来，后续操作都靠它
const popperInstance = new Popper(refEl, popEl, {
  placement: 'bottom-start', // 初始定位方向
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 10] // 初始偏移：X轴0px，Y轴10px
      }
    }
  ]
});

两种常见更新场景： #

• 场景1：参考元素（refEl）位置变化
  只要调用实例的update()方法，Popper就会自动重新计算并更新位置：

  // 比如refEl被拖动、滚动或者DOM布局变化后，执行这句
  popperInstance.update();
  

• 场景2：手动调整Popper的偏移量
  如果想主动修改X/Y方向的偏移，用setOptions()更新修饰器参数，再调用update()让修改生效：

  // 示例：把Popper向右移20px，向下移15px
  popperInstance.setOptions({
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [20, 15]
        }
      }
    ]
  });
  // 触发位置更新
  popperInstance.update();
  

二、让Popper跟随光标移动 #

你已经拿到了光标坐标，核心思路是让Popper以光标位置为参考点。我们不需要真实DOM元素，只要创建一个「虚拟参考对象」，提供getBoundingClientRect()方法返回光标坐标就行：

步骤1：用虚拟参考初始化Popper #

// 先定义光标坐标变量，后续会实时更新
let cursorX = 0;
let cursorY = 0;

// 创建虚拟参考对象
const cursorReference = {
  getBoundingClientRect() {
    // 返回光标位置的边界信息（宽高设为0，因为光标是一个点）
    return {
      top: cursorY,
      left: cursorX,
      bottom: cursorY,
      right: cursorX,
      width: 0,
      height: 0
    };
  }
};

// 用虚拟参考初始化Popper
const popperInstance = new Popper(cursorReference, popEl, {
  placement: 'bottom-start', // 让Popper显示在光标下方
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [5, 5] // 微调光标和Popper的距离，避免贴得太近
      }
    }
  ]
});

步骤2：监听光标移动，实时更新Popper位置 #

假设你的文本框ID是input-box，添加监听事件：

document.getElementById('input-box').addEventListener('mousemove', (e) => {
  // 更新光标坐标
  cursorX = e.clientX;
  cursorY = e.clientY;
  // 让Popper重新计算位置
  popperInstance.update();
});

补充：关于onUpdate回调 #

你提到尝试过onUpdate，它是Popper完成位置更新后的回调函数，可以用来获取最新的Popper位置信息：

new Popper(refEl, popEl, {
  onUpdate(data) {
    // data.offsets.popper里包含了Popper的最终定位数据
    console.log('Popper最新位置：', data.offsets.popper.left, data.offsets.popper.top);
  }
});

内容的提问来源于stack exchange，提问作者Jayd