Popover does not get anchored to the triggering element

Question

So my Twitter Bootstrap popovers seem to be positionally challenged when the triggering element is contained within an element with the style

Answer 1

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

Answer 2

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