如何在Angular15+Ng-Bootstrap14.2中为Tooltip组件添加偏移量？

问题根源 #

Ng-Bootstrap 14.x 依赖 Popper.js v2，你的配置存在两个核心问题：

1. 错误的修饰器阶段设置：将offset修饰器的phase设为'main'，而Popper.js v2中offset的默认阶段是'beforeMain'。放在main阶段会导致布局计算时坐标数据未初始化，触发Cannot read properties of undefined (reading 'y')异常。
2. 重复添加offset修饰器：直接向modifiers数组push新的offset实例，会与Ng-Bootstrap内置的offset修饰器冲突，干扰Popper的布局逻辑。

正确解决方案 #

修改popperOptions函数，找到并复用内置的offset修饰器，或在不存在时正确添加：

options(options: any) {
  // 定位内置的offset修饰器
  const offsetModifier = options.modifiers.find((mod: any) => mod.name === 'offset');
  
  if (offsetModifier) {
    // 修改已有offset的偏移参数 [水平偏移, 垂直偏移]
    offsetModifier.options.offset = [10, 0];
  } else {
    // 无内置offset时添加（Ng-Bootstrap 14.x一般会自带，此分支为兼容兜底）
    options.modifiers.push({
      name: 'offset',
      enabled: true,
      options: {
        offset: [10, 0]
      }
    });
  }

  return options;
}

进阶：动态偏移配置 #

如果需要根据tooltip的放置方向动态调整偏移，可以使用函数形式的offset参数：

offsetModifier.options.offset = ({ placement }) => {
  // 底部放置时水平偏移10px，垂直偏移5px；其他方向无偏移
  return placement.startsWith('bottom') ? [10, 5] : [0, 0];
};

验证说明 #

替换上述代码后，Tooltip会按照配置的偏移量显示，同时不会触发原有异常，符合你期望的布局效果。

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