Bootstrap 4 - 自动Popover重新定位如何工作？ [英] Bootstrap 4 - how does automatic Popover re-positioning work?
问题描述
新的Bootstrap Popovers的一个很好的功能是，它们自动重新定位，当它们自动重新定位时用户更改设备方向，滚动或调整窗口大小。他们甚至随着内容的重新流动 - 例如当你调整窗口大小时，段落会被包裹，并且元素的长度会增加或缩小 - 屏幕上的所有弹出窗口都会重新定位到接近其目标位置。
Popover插件如何知道页面正在重新流动，以便触发popover重新定位？
我的web应用程序是动态的，用户操作会导致元素增长/缩小，切换开关等。目前，当我通过代码更改页面时，弹出窗口被留下 - 它们不会被重新定位在目标附近。
作为用户的一种解决方法是只需滚动一下屏幕，Bootstrap就会重新定位弹出窗口，一切看起来都正确。
因此，问题是：Popover如何重新定位？ - 定位工作（我可以挂钩它，所以我可以自动触发它）。
E DIT ：我刚刚注意到，如果动态内容碰巧是Bootstrap navbar 折叠/展开，那么弹出窗口就会重新定位，因为点击 navbar-toggler 。
这个问题。
- popper.js如何知道何时更新弹出窗口？
- popover change position？
回答这些问题：
2：How你需要popover的更新方法：
$（'＃element'）。popover（'update'）
在这里做了一个快速演示：
https：// jsfiddle。 net / pktyptyp /
首先，点击绿色按钮打开弹出窗口。然后使用按钮2移动弹出式切换。现在切换和弹出不再排队。因此，最后使用按钮3通过其切换来重新定位弹出窗口。
这里的文档隐藏在弹出窗口方法部分的下方：
'p> 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
更新方法不会在该事件处理程序中立即调用 - 会有一些内容传递回Boostrap小部件，弹出窗口 update 方法。
我确信Popper& Popover小部件将不会查看单个切换的位置。这部分是因为除非切换位置，否则它们的左/顶部属性将始终为'自动'，因此如果它们正在移动将很难解决。或者换句话说，当窗口滚动时，切换没有在文档内移动，但弹出窗口（绝对位置）需要更新。所以这是一个广泛的笔刷 - 他们正在寻找整个窗口的变化，假设弹出不在位，然后触发更多事件来更新它们。
如果有人对此有更多了解，请在评论中告诉我！
您有一些优势，因为您知道何时更改UI，所以你可以在所有的Popovers上随意地调用'update'。这对我来说似乎是理想的方法。然而，如果你的切换是绝对定位的，你可以通过观察它们的位置来自动做到这一点。这里有一个绝对定位切换的例子，在这个例子中，弹出窗口会自动移动，而不会点击第三个按钮。
https://jsfiddle.net/pktyptyp/1/
I like letting my popovers stay open until the user explicitly closes them.
One of the nice features of the new Bootstrap Popovers is that they automatically re-position when the user changes device orientation, scroll or resize the window. They even follow along as the content re-flows - e.g. as a paragraph is wrapped and the element grows or shrinks in length while you resize the window - all the popovers on the screen will keep re-positioning to be near their target.
How does the Popover plugin know that the page is being re-flowed so that it triggers the popover re-positioning?
My webapp is dynamic, user actions cause elements to grow/shrink, toggle on/off, etc. At the moment, when I change the page via code, the popovers get left behind - they don't get re-positioned near their target.
One workaround to this, as a user, is to just scroll the screen a little bit and Bootstrap will re-position the popovers and everything looks right again.
I'm trying to figure out a way to re-position the popovers when I change the page layout via code.
Hence the question: how does Popover re-positioning work (and can I hook into it so I can trigger it automatically).
EDIT: I've just noticed that the popovers will re-position just fine if the "dynamic" content happens to be the Bootstrap navbar collapsing/expanding because of a tap on the navbar-toggler.
There's two parts to this question.
- How does popper.js know when to update the popovers?
- How does the popover change position?
Answering these backwards:
2: How does the popover change position?
You need the update method of the popover:
$('#element').popover('update')
I've done a quick demo here:
https://jsfiddle.net/pktyptyp/
First, click the green button to open the popover. Then use button 2 to move the popover toggle. Now the toggle and the popover no longer line up. So finally use button 3 to reposition the popover by its toggle.
The docs for this are tucked under the popover methods section here:
http://getbootstrap.com/docs/4.0/components/popovers/#methods
If you wanted to update every popover on your page and not just a specific one, then you could do:
$('[data-toggle="popover"]').popover('update')
How does popper.js know when to update the popovers?
Popper will be subscribing to events like window.scroll and window.resize. You can see this in a bit of their source code:
https://github.com/FezVrasta/popper.js/blob/master/packages/popper/src/utils/setupEventListeners.js
The update method won't be called immediately in that event handler - there'll be something that gets passed back to the Boostrap widget, which in turn will call the popover update method.
I am fairly sure Popper & the Popover widget will not be looking at the position of the individual toggles. This is partly because unless the toggles are positioned, their left/top properties will always be 'auto' so it will be hard to work out if they are moving. Or to put it another way, when the window scrolls, the toggle has not moved within the document, but the popover (which is absolutely positioned) needs updating. So this is a bit of a broad brush - they are looking out for the entire window changing, assuming the popovers are out of position, then triggering more events to update them.
If anyone knows more about this, though, please tell me in the comments!
You have a bit of an advantage in that you know when you change your UI, so you can call 'update' on all the Popovers at will. This to me seems like the ideal approach.
However, if your toggles are absolutely positioned, you could do this a bit more automatically by watching their position. Here's an example with an absolutely-positioned toggle and in this example, the popover moves automatically without the third button click.
https://jsfiddle.net/pktyptyp/1/
这篇关于Bootstrap 4 - 自动Popover重新定位如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
