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

Question

我相信这是ng-bootstrap中的一个错误，并且已经被报告，不幸的是没有关于修复的信息。

我将在此处添加组件 html，但我的问题演示更有用。

<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>

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

我的黑客使用 覆盖工具提示的位置属性fixed，然后确保其top和left定位正确，并width:100%确保显示提示而没有早期换行符（可以改进）。

我不喜欢这个，因为我不知道连锁反应，有其他人想出更好的解决方案吗？

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

黑客演示

Answer 1

我遇到了同样的问题，最终在元素周围放置了一个带有position: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>