Openlayers: Popups Compatible with Bootstrap 4/Tether

[pjdufour]

Bootstrap v4 uses tether for positioning popovers, such as in https://openlayers.org/en/latest/examples/overlay.html. Tether requires manually triggering a call to its position function, since it uses transform: ... css instead of left and top.

https://v4-alpha.getbootstrap.com/components/popovers/

Essentially this can be accomplished with a postrender listener, as below. However something in the OpenLayers internals would be nice.

          postrender: function(e){
            var popover = $("#popup").data("bs.popover");
            if(angular.isDefined(popover))
            {
              var tether = popover._tether;
              if(angular.isDefined(tether))
              {
                tether.position()
              }
            }
          }

[v1r0x]

The release version of Bootstrap v4 uses popper.js for positioning instead of tether. The corresponding position() function in popper is update()/scheduleUpdate().

My code looks like this:

map.on('postrender', function(e) {
    let popover = $('#popup').data('bs.popover');
    if(!popover) return;
    let popper = popover._popper;
    if(!popper) return;
    popper.scheduleUpdate();
});

PS: Your postrender fix helped me a lot, thanks @pjdufour !

[fredj]

Closing due to lack of activity.

[deveborn]

Thank you very much _v1r0x_ for posting this solution!