滚动页面时，Angular 9+ 和 ng-bootstrap 工具提示在固定元素上失败，是否有比我更好的修复方法？

Question

我相信这是 ng-bootstrap 中的一个错误并已reported不幸的是，没有关于修复的信息。
我将在此处添加组件 html 但我的 demo of the issue更有用。

<p>Hover over box 1 for a tooltip and then scroll</p>
<div *ngFor="let item of [].constructor(lineCount); let i = index">{{i}}</div>
<ul 
    class="lhsMenuWrapper show">
    <li
        class='lhsMenuWrapper-item common buttonTop'
        ngbTooltip="Box 1"
        placement="right">
        <h1>1</h1>
    </li>
</ul>
<div 
  class='common buttonTwo'
  ngbTooltip="Box 2"
  placement="right">
  <h1>2</h1>
</div>

工具提示的 GIF 失败 position:fixed元素

我的 hack 用 fixed 覆盖了工具提示的位置属性，然后确保其 top和 left位置正确， width:100%确保在没有早期换行的情况下显示提示(可以改进)。
我不喜欢这个，因为我不知道链式 react ，有没有其他人想出更好的解决办法？

.show {
    position: fixed!important;
    top: 0px;
    left: 0px;
    width: 100%;
}

Hack demo

Answer 1

我遇到了同样的问题，最终在元素周围放置了一个外部包装器，位置为:relative。这似乎解决了问题。
IE。

.sidebar {position: fixed;}
.tooltip-wrapper {position: relative;}

<div class="sidebar">
  <nav>
    <div *ngFor="let item of menuItems" class="tooltip-wrapper">
      <div class="side-nav-item" placement="bottom" ngbTooltip="{{item.tooltip}}">
        <div class="sidebar-icon">
          <i class="{{item.icon}}"></i>
        </div>
        <div class="sidebar-title">
          <span>{{item.name}}</span>
        </div>
      </div>
    </div>
  </nav>
</div>