Popover不会锚定到触发元素

Question

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

滚动元素时，弹出框不会随之滚动。

我真的希望popover随着这个可滚动元素中的内容移动。我怎样才能做到这一点？

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/

更新

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

为

好

Answer 1

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

position: relative;

See jsFiddle

对于您的用例，

编辑，您可以绑定onscroll容器事件并使用以下代码段：

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'
});