ng-bootstrap中的tooltip组件如何引入offset？

Question

我们使用 Angular 15 和 ng-bootstrap 14.2。不知何故，很难对工具提示进行一些偏移。

这是一个最小的 stackblitz，它重现了该问题：https://stackblitz.com/edit/angular-nj28pa?file=src%2Fmain.ts

这就是我们想要实现的目标：

我们的模板：

<div class="members-list__member"
     [class.me-3]="!standalone"
     [ngbTooltip]="tooltip ? member.givenName + ' ' + member.familyName + (isYourContact ? ' (your contact)' : '') : null"
     placement="bottom-start auto"
     [closeDelay]="50"
     triggers="hover focus click"
     [popperOptions]="options"
>
  <img ...>
</div>

以及感兴趣的选项函数（这是对现有修饰符和来自 popper docu 的偏移量修饰符的一种猜测）：

options(options) {
    options.modifiers.push({
      name: 'offset',
      enabled: true,
      phase: 'main',
      options: {
        offset: [10, 0]
      }
      
    });
    
    return options;
  }

然而，这直接导致了一个例外：

Unhandled Promise rejection: Cannot read properties of undefined (reading 'y') ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read properties of undefined (reading 'y')
    at node_modules/@popperjs/core/lib/utils/detectOverflow.js:60:37

不幸的是，ng-bootstrap 示例对于偏移量相当沉默，所以如果 sombeody 知道我们做错了什么，我们将不胜感激！

Answer 1

好吧，我现在破解了 scss...

.bs-tooltip-bottom {
  padding-top: .5rem;

  .tooltip-arrow {
    top: calc(.5rem - var(--bs-tooltip-arrow-height));
  }

}

我更喜欢修改选项的工作方式，但这也能达到目的。