I am using Twitter Bootstrap popover and I don't know how would be able to change the popover location dinamic while resizing browser window. The problem is that when i resize the window, popover stays fixed on position. I want to delay the popover like other html elements.

Code:

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

I am using Twitter Bootstrap popover and I don't know how would be able to change the popover location dinamic while resizing browser window. The problem is that when i resize the window, popover stays fixed on position. I want to delay the popover like other html elements.

Code:

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

• javascript
• twitter-bootstrap
• popover

• $(window).on('resize', function() { /* reposition popover here */ }); – BenM Commented Jun 19, 2013 at 21:03
• Solution : github./twbs/bootstrap/issues/3117 – user Commented May 29, 2014 at 17:54

2 Answers 2

This works for me. It calls the 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');
        }
    });
});

Have a look at the following questions and answers:

• Bootstrap Popover showing at wrong place upon zoom in/out or resizing Browser window
• jQuery position element based on window resize

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

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

Within this code you must reposition your element.