Popover 没有锚定到触发元素 [英] Popover does not get anchored to the triggering element

问题描述

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

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

我真的希望弹出框随着这个可滚动元素内的内容移动.我怎样才能做到这一点?

弹出框代码:

$(this).popover({动画:假，html:对，位置:popover.placement ||'自动底部',标题:popover.title，内容:popover.validationMessage + popover.content，触发器:'手动'，容器:'.content-panel'}).click(函数(e){$('BUTTON[data-toggle="popover"]').each(function (index, element) { $(this).popover('hide'); });$(this).popover('show');$('#' + $(this).attr('data-for')).focus();});

<块引用><块引用>

.content-panel 是可滚动元素.

给我这个，蝙蝠侠

对于您的用例，您可以绑定容器的 onscroll 事件并使用以下代码段:

见 jsFiddle

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

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

解决方案

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

这篇关于Popover 没有锚定到触发元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！