弹出框没有锚定到触发元素

Question

所以当触发元素包含在样式为-ms-overflow-y: auto;（窗口内的可滚动元素）的元素中时，我的Twitter Bootstrap popovers 似乎在位置上受到挑战。

当元素滚动时，popover 不会随之滚动。

我真的希望弹出框与这个可滚动元素中的内容一起移动。我怎样才能做到这一点？

弹出代码：

$(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 是可滚动元素。

帮我搞定这个，蝙蝠侠

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

更新

我希望弹出框继续漂浮在其他元素之上。在父元素上使用position:relative; 时，它包含弹出框，而不是让它漂浮在顶部。

不好

好

Answer 1

popover 的父元素（offsetParent）需要不是static，你可以相对于文档定位：

position: relative;

See jsFiddle

编辑：对于您的用例，您可以绑定容器的onscroll 事件并使用以下sn-p：

SEE jsFiddle

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

Answer 2

适用于 BS 3 及以上

你可以使用container: $(element)

例子：

let elem = $(this)
$(elem).popover({
    selector: '[rel=popover]',
    trigger: 'hover',
    container: $(elem),
    placement: 'bottom',
    html: true,
    content: 'Popover Content'
});