Dynamically change popover location when resizing browser window

Question

I am using Twitter Bootstrap popover and I do not know how to change the dynamic location of the popover when resizing the browser window. The problem is that when I resize the window, the popover remains in a fixed position. I want to defer popover like other html elements.

code:

$('#popover1').popover({ html : true, content: function() { return $("#form").html(); }, placement: "top" }); 

Answer 1

This works for me. It raises a show event for all visible popovers:

 $(window).off("resize").on("resize", function() { $(".popover").each(function() { var popover = $(this); if (popover.is(":visible")) { var ctrl = $(popover.context); ctrl.popover('show'); } }); }); 

Answer 2

Take a look at the following questions and answers:

• Boot Popover showing in the wrong place when scaling to / from or resizing the browser window
• JQuery position element based on window resizing

You need to use an event handler for the resize event:

 $(window).resize(function() { // your positioning code here }); 

In this code you have to move your element.