Javascript Bootstrap 4-自动Popover重新定位是如何工作的？

我喜欢让我的弹出窗口一直打开，直到用户明确关闭它们

新引导弹出窗口的一个很好的特性是，当用户更改设备方向、滚动或调整窗口大小时，它们会自动重新定位。它们甚至会随着内容的重新流动而出现—例如，当您调整窗口大小时，段落被包装，元素的长度会增加或减少—屏幕上的所有弹出框都会保持重新定位以接近其目标

Popover插件如何知道页面正在重新流动，从而触发Popover重新定位

我的webapp是动态的，用户操作会导致元素增长/收缩、打开/关闭等。此时，当我通过代码更改页面时，弹出框会被甩在后面-它们不会被重新定位到目标附近

作为一个用户，解决这个问题的一个方法是只需稍微滚动屏幕，引导程序就会重新定位弹出窗口，一切看起来都正常了

当我通过代码更改页面布局时，我试图找到一种重新定位弹出框的方法

因此，问题就来了：Popover的重新定位是如何工作的（我可以挂上它以便自动触发它吗）

---

编辑：我刚刚注意到，如果“动态”内容恰好是引导

导航栏

因为点击

导航栏切换开关

而折叠/展开，则弹出框将重新定位

popper.js如何知道何时更新弹出窗口

popover是如何改变位置的

反向回答这些问题：

2：popover是如何改变位置的？ 您需要popover的更新方法：

$('#element').popover('update')

我在这里做了一个快速演示：

首先，单击绿色按钮打开弹出窗口。然后使用按钮2移动popover切换。现在，拨动键和弹出框不再对齐。因此，最后使用按钮3通过其切换重新定位popover

这方面的文档放在这里的popover方法部分下：

如果您想更新页面上的每个popover，而不仅仅是一个特定的popover，那么您可以执行以下操作：

$('[data-toggle="popover"]').popover('update')

popper.js如何知道何时更新弹出窗口？ Popper将订阅window.scroll和window.resize等事件。您可以在他们的一些源代码中看到这一点：

在该事件处理程序中，不会立即调用update方法——会有一些内容被传递回Boostrap小部件，而Boostrap小部件又会调用popover

update

方法

我相当肯定Popper&Popover小部件不会查看各个开关的位置。这部分是因为除非切换被定位，否则其左/顶属性将始终为“自动”，因此很难确定它们是否在移动。或者换句话说，当窗口滚动时，切换没有在文档中移动，但是popover（绝对定位）需要更新。所以这有点笼统-他们正在观察整个窗口的变化，假设弹出框不在位置，然后触发更多事件来更新它们

如果有人知道更多，请在评论中告诉我

你有一点优势，你知道当你改变你的用户界面，所以你可以调用'更新'在所有的弹出窗口上随意。在我看来，这似乎是理想的方法

然而，如果你的开关是绝对定位的，你可以通过观察它们的位置来更自动地完成。下面是一个带有绝对定位开关的示例，在这个示例中，popover会自动移动，而无需单击第三个按钮

---

我不知道这背后的逻辑是如何工作的，因为在Bootstrap中，我们使用Popper.js来处理这一点，因此如果您想了解这背后的逻辑，可以浏览以下内容：

赞成指出更新方法（这是我自己最终弄明白的）。但问题是，bootstrap/popper如何知道屏幕上的东西在变化，从而知道如何更新弹出窗口？我确实想知道这是否就是你所问的。Popper将观看window.resize和scrolling等事件——它可能还会观看其他一些事件（不确定）。但是你有一个优势，那就是你知道你的UI什么时候改变了（你在代码中改变了它），所以你可以直接调用“更新”，这看起来更整洁？如果你想要一个更自动的方法，你可以观察你的开关的x，y位置，当它改变时，打电话更新。我刚刚更新了我的答案，对上面的内容进行了一点扩展。是的，我现在通过在当前内容改变的任何地方打电话更新，让我的应用程序工作了。现在很简单，但随着应用的发展，事情会变得越来越复杂。但是，这仍然是一个单独的问题，我认为这几乎涵盖了Popper/Bootstrap。那么Bootstrap没有做任何事情来更新Popper的位置？但问题仍然存在——波普尔如何知道何时更新popover的位置？