Bootstrap Popover showing at wrong place upon zoom in/out or resizing Browser window

问题

When I re-size windows of any browser by zooming-in or zooming-out. Popover is not updating position and showing at wrong place.

How do I change the placement/position of Bootstrap Popover upon re-sizing / zooming the browser's window.

回答1:

It seems to work fine in Bootstrap 2.2.1 (unless I am understanding your question wrong). Try the live demo at http://twitter.github.com/bootstrap/javascript.html#modals to see if this is what you are looking for. I use onresize event for the window to set the size of the complex modal and its innards correctly.

回答2:

I tried to re-position it myself with offset().top and outerHeight() but ran into issues. The solution for me was to simply recall the popover's show event again:

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

回答3:

It doesn't work on the page which has multiple popovers as it displays all popvers on window resize

来源：https://stackoverflow.com/questions/13638831/bootstrap-popover-showing-at-wrong-place-upon-zoom-in-out-or-resizing-browser-wi