javascript - Popover does not get anchored to the triggering element - Stack Overflow

admin管理员组

文章数量:1278880

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

/

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

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/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

• javascript
• jquery
• html
• twitter-bootstrap
• twitter-bootstrap-3

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Mar 24, 2014 at 9:50 Sam AxeSam Axe 33.7k1010 gold badges6060 silver badges9191 bronze badges 4

• You should provide a jsfiddle – A. Wolff Commented Mar 24, 2014 at 9:55
• Would love to, but I can't seem to get jsfiddle to show a popover. – Sam Axe Commented Mar 24, 2014 at 10:11
• jsfiddle/KyleMit/VUZhL e.g – A. Wolff Commented Mar 24, 2014 at 10:12
• I don't know why you deleted your answer @A.Wolff. It was exactly what I was looking for! – Sam Axe Commented Mar 24, 2014 at 19:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

For BS 3 and above

you can use container: $(element)

Example:

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

本文标签： javascriptPopover does not get anchored to the triggering elementStack Overflow