Popover没有固定在触发元素上 [英] Popover does not get anchored to the triggering element

问题描述

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

滚动时，弹出窗口不会滚动。

我真的很希望弹出窗口随着这个可滚动元素中的内容移动。

弹出式代码：

  $（ 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（）; 
}）; 
  

。内容面板是可滚动的元素。

蝙蝠侠

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

SEE jsFiddle

  $（function（）{
 $（'＃example'）。popover （）; 
 $（'div'）。on（'scroll'，function（）{
 var $ container = $（this）; 
 $（this）.find（'。popover'）。each（function（）{
 $（this）.css（{
 top： -  $ 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屋！