Bootstrap 4 - how does automatic Popover re-positioning work?

Question

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

Answer 1

There's two parts to this question.

1. How does popper.js know when to update the popovers?
2. 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/

Answer 2

I don't know how the logic work behind that because on Bootstrap we use Popper.js to handle that so if you want to understand the logic behind that you can browser this : https://github.com/FezVrasta/popper.js