如何配置Tippy/Popper让tooltip避免溢出遮挡元素，提前触发位置调整

• 核心原理：Tippy的位置调整逻辑底层基于Popper.js实现，可通过修改preventOverflow修饰符的配置，自定义溢出检测边界和触发阈值，实现提示框触碰预览区域时提前调整位置的需求。
• 具体配置步骤：
  1. 先获取皮带预览区域的DOM元素，示例代码：
     const beltPreviewEl = document.querySelector('#你的预览区域元素ID')
  2. 初始化Tippy时添加对应配置，完整示例如下：

tippy('.tooltip-target', {
  // 你原有的其他配置（如内容、主题、触发方式等）
  popperOptions: {
    modifiers: [
      {
        name: 'preventOverflow',
        options: {
          // 将溢出检测的边界从默认视口替换为皮带预览区域
          boundary: beltPreviewEl,
          // 自定义调整触发阈值，单位px，数值越大调整触发越早
          padding: 10
        }
      }
    ]
  }
})

• 适配说明：如果使用React、Vue等框架的Tippy封装组件，只需将上述popperOptions配置传入组件对应props即可生效，配置规则完全一致。
• 效果调试：你可以逐步调整padding的数值，直到位置调整的触发时机符合你的预期即可。

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