我喜欢让弹出窗口保持打开状态，直到用户明确关闭它们。
新的 Bootstrap Popovers 的一个很好的特性是当用户改变设备方向、滚动或调整窗口大小时，它们会自动重新定位。他们甚至会随着内容的重新流动而跟进 - 例如当您调整窗口大小时，段落被换行并且元素的长度增加或缩小 - 屏幕上的所有弹出窗口将继续重新定位以靠近其目标。
Popover 插件如何知道页面正在重排以触发 popover 重新定位？
我的网络应用程序是动态的，用户操作会导致元素增大/缩小、打开/关闭等等。目前，当我通过代码更改页面时，弹出窗口会被遗忘 - 它们不会重新定位接近他们的目标。
作为用户，解决此问题的一个方法是稍微滚动屏幕，Bootstrap 将重新定位弹出框，一切看起来又恢复正常了。
当我通过代码更改页面布局时，我正在尝试找出一种重新定位弹出窗口的方法。
因此问题来了:Popover 重新定位是如何工作的(我可以 Hook 它以便自动触发它)。
编辑:我刚刚注意到，如果“动态”内容恰好是 Bootstrap navbar 折叠/展开，则弹出框会重新定位，因为点击 navbar-toggler。
最佳答案
这个问题有两个部分。
- popper.js 如何知道何时更新弹出窗口？
- 弹出窗口如何改变位置？
向后回答这些问题:
2:popover如何改变位置？
你需要弹出框的更新方法:
$('#element').popover('update')
我在这里做了一个快速演示:
https://jsfiddle.net/pktyptyp/
首先，单击绿色按钮打开弹出窗口。然后使用按钮 2 移动弹出框开关。现在切换和弹出窗口不再对齐。所以最后使用按钮 3 通过其切换来重新定位弹出窗口。
这方面的文档藏在此处的弹出方法部分下:
http://getbootstrap.com/docs/4.0/components/popovers/#methods
如果您想更新页面上的每个弹出窗口，而不仅仅是一个特定的弹出窗口，那么您可以这样做:
$('[data-toggle="popover"]').popover('update')
popper.js 如何知道何时更新弹出窗口？
Popper 将订阅 window.scroll 和 window.resize 等事件。您可以在他们的一些源代码中看到这一点:
https://github.com/FezVrasta/popper.js/blob/master/packages/popper/src/utils/setupEventListeners.js
update 方法不会在该事件处理程序中立即被调用 - 会有一些东西被传递回 Boostrap 小部件，后者又会调用 popover update 方法。
我相当确定 Popper 和 Popover 小部件不会查看各个切换开关的位置。部分原因是，除非切换按钮已定位，否则它们的左/顶部属性将始终为“自动”，因此很难计算出它们是否在移动。或者换句话说，当窗口滚动时，toggle 并没有在文档中移动，但是 popover(绝对定位的)需要更新。所以这有点笼统 - 他们正在寻找整个窗口的变化，假设弹出窗口不在位置，然后触发更多事件来更新它们。
不过，如果有人对此有更多了解，请在评论中告诉我!
您有一点优势，即您知道何时更改 UI，因此您可以随意对所有 Popover 调用“更新”。这对我来说似乎是理想的方法。
但是，如果您的开关是绝对定位的，您可以通过观察它们的位置来更自动地执行此操作。这是一个带有绝对定位开关的示例，在此示例中，弹出框自动移动而无需单击第三个按钮。
关于javascript - Bootstrap 4 - 自动 Popover 重新定位如何工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46821545/