NgbTooltip 未在 NgbPopover Window 中显示箭头 div ( ▼ )

Question

由于 NgbPopover 的 div.arrow 和 NgbTooltip 的 div.arrow 的箭头类冲突，因此箭头 div 在 NgpPopover 体内似乎不起作用。看起来这是一个 problem in ng-bootstrap with bootstrap v4 但可以通过更新到新的 bootstrap v5.

来解决

但是，如果我们能找到解决方法，那么团队可以很方便地临时解决这个问题。

请参阅 stackblitz example 重现此问题。

版本：

{
   "@angular/core": "~11.2.14",
   "@ng-bootstrap/ng-bootstrap": "^9.1.1",
   "bootstrap": "^4.6.0"
}

Answer 1

如果您不想升级，作为解决方法，您可以为您的工具提示定义自定义 tooltipClass：

<ng-template #popoverContent>
  <div class="d-flex align-items-center justify-content-center" style="width: 200px; height: 200px;">
    <button ngbTooltip="Tooltip with missing arrow " tooltipClass="my-custom-class" [closeDelay]="2000000"> Button inside Popover Window</button>
  </div>
</ng-template>

并且在 CSS 中，您可以定义此内容，这将覆盖由弹出窗口 CSS:

应用的透明 border-color

::ng-deep .my-custom-class .arrow::before {
  border-top-color: black;
}

请参阅 this StackBlitz 以获得演示。

NgbTooltip 未在 NgbPopover Window 中显示箭头 div ( ▼ )

NgbTooltip not showing the arrow div ( ▼ ) inside NgbPopover Window

bootstrap-4

ng-bootstrap

angular