Bootstrap Popover follow trigger element on page resize

问题

FIDDLE HERE

I have tried various answers from this forum without success. I am trying to get my bootstrap popover to "follow" the element that triggered it on page resize. Challenge is the popovers are dynamically generated so I cannot give a specific id.

My code repositions the popover but it flickers unpleasantly during resize and it ends with the popover invisible.

How do I hide the popover then show it again when resize is completed?

My code is:

// Reposition popover when screen changes size
$(window).on('resize', function() {
    $('[data-toggle="popover"], [data-original-title]').each(function() {
        if ($(this).data('bs.popover').tip().hasClass('in')) {
            $(this).popover('hide');
            $(this).popover('show');
        }
    });
});

My popover code is:

// Popover Menu initialize
$('.btn-row-popover-menu').popover({
    placement: 'left',
    trigger: 'click',
    html: true,
    title: function() {
        return $(this).parent().find('.btn-row-popover-menu-head').html();
    },
    content: function() {
        return $(this).parent().find('.btn-row-popover-menu-body').html();
    }

}).on('show.bs.popover', function(e) {
    if (window.activePopover) {
        $(window.activePopover).popover('hide')
    }
    window.activePopover = this;

}).on('hide.bs.popover', function() {
    window.activePopover = null;
});

// Close popover when clicking anywhere on the screen
$(document).on('click', function(e) {
    $('[data-toggle="popover"], [data-original-title]').each(function() {
        var target = $(e.target);
        if (!target.is('.popover') && !target.is('.popover *') && !target.is('.btn-row-popover-menu') && !target.is('.btn-row-popover-menu *') || target.is('.btn-popover-close')) {
            (($(this).popover('hide').data('bs.popover') || {}).inState || {}).click = false;
        }
    });
});

回答1:

Below fixes your issue. We are just going to click the button twice to simulate close and open. Hide and show on popovers will not really work as it happens with normal UI elements.

$(window).on('resize', function() {
    $('[data-toggle="popover"], [data-original-title]').each(function() {
        if ($(this).data('bs.popover').tip().hasClass('in')) {
            $(this).closest('.btn-row-popup-menu').trigger('click');
            $(this).closest('.btn-row-popup-menu').trigger('click');
        }
    });
});

Additionally there is a property container: 'body' which works in some cases

来源：https://stackoverflow.com/questions/39404514/bootstrap-popover-follow-trigger-element-on-page-resize

标签

jquery

css

twitter-bootstrap

bootstrap-popover