通过更改箭头位置来防止屏幕外弹出窗口

Question

摘要

我想水平移动屏幕外的ng-bootstrap个弹出窗口。

Stackblitz： https://stackblitz.com/edit/angular-xt18mj

背景

我正在使用ng-bootstrap（Bootstrap 4角度小部件）。我的应用程序包含一个工具栏，其中包含几个按钮。每个按钮都是一个弹出窗口：单击它，相应的内容显示在按钮下方，如下所示。

屏幕截图：https://i.imgur.com/hW8JhMW.png

问题

但是，左侧弹出窗口不在屏幕上。在原始Bootstrap 4中，Popper.js会注意到它并在右侧显示弹出窗口。已经报告了该错误here。

但是我不希望出现这种情况，因为我希望弹出窗口停留在工​​具栏下。

我想要的是找到一种方法，将弹出框向右移动，将箭头保持在按钮下方，如下所示： https://i.imgur.com/u0HqiPS.png

我通过以下方式更新了弹出框（ngb-popover-window）的CSS：

element.style {
    top: 54px;
    // left: -80px;
    left: 0px !important;
}

这将使弹出窗口正确地与其父窗口（位于relative上）对齐。

屏幕截图：https://i.imgur.com/O2WcDrz.png

但是：

1. 箭头不在按钮1下方（宽度保持50％）
2. 仅当弹出窗口不在屏幕上时，我才想应用此操作（在实际应用中，它取决于工具栏的左边距，宽度为2.5％，因此不是固定的px值）
3. 即使添加了left: 0px !important;，Popper.js也会动态擦除!important值，并将其重新设置为计算值。