How to change Bootstrap popover position dynamically?

Question

Is there any way to change Bootstraps Popover placement/position depending on window width? I'm using it to display some extra form items and need to show if on left site, but on mobile on top. So basically when screens goes smaller - I need to change the position.

jQuery('#monthly-expenses').popover({
    content: jQuery('#monthly-expense-datails'),
    placement() {
        let placement = 'left';

        if (jQuery(window).width() <= 992) {
            placement = 'top';
        }

        return placement;
    },
    html: true,
    trigger: 'manual'
})

Answer 1

You can destroy and recreate the popover when you change the window size:

var placement;
jQuery(window).on('resize',function(){

        if (jQuery(window).width() <= 992 && placement == 'left') {//when the width is right and we did't change placement
           placement = 'top';
           jQuery('#monthly-expenses').popover('dispose');//destroy the 
           createPopover(placement);//create it with the new placement
        } else  if (jQuery(window).width() > 992 && placement == 'top')
           placement = 'left';
           jQuery('#monthly-expenses').popover('dispose');//destroy the popover
           createPopover(placement);//create it with the new placement
        }

});
function createPopover(placement) {
  jQuery('#monthly-expenses').popover({
        content: jQuery('#monthly-expense-datails'),
        placement:placement,
        html: true,
        trigger: 'manual'
   });
}