Popover does not get anchored to the triggering el

问题:

So my Twitter Bootstrap popovers seem to be positionally challenged when the triggering element is contained within an element with the style -ms-overflow-y: auto; (a scrollable element within the window).

When the element is scrolled, the popover does not scroll with it.

I would really like the popover to move with the content within this scrollable element. How can I achieve this?

popover code:

$(this).popover({
            animation: false,
            html: true,
            placement: popover.placement || 'auto bottom',
            title: popover.title,
            content: popover.validationMessage + popover.content,
            trigger: 'manual',
            container: '.content-panel'
}).click(function (e) {
                $('BUTTON[data-toggle="popover"]').each(function (index, element) { $(this).popover('hide'); });
                $(this).popover('show');
                $('#' + $(this).attr('data-for')).focus();
            });

.content-panel is the scrollable element.

fiddle me this, Batman

http://jsfiddle.net/VUZhL/171/

Update

I would like the popover to continue floating overtop the other elements. When using position:relative; on the parent element it contains the popover instead of letting it float over top.

Bad

Good

回答1:

Parent element (offsetParent) of popover need to not be static, you could postionned it relatively to document:

position: relative;

See jsFiddle

EDIT: for your use case, you could bind onscroll event of container and use following snippet:

SEE jsFiddle

$(function () {
    $('#example').popover();
    $('div').on('scroll', function () {
        var $container = $(this);
        $(this).find('.popover').each(function () {
            $(this).css({
                top:  - $container.scrollTop()
            });
        });
    });
});