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

so twitter bootstrap popovers seem positionally challenged when triggering element contained within element style -ms-overflow-y: auto; (a scrollable element within window).

when element scrolled, popover not scroll it.

i popover move content within scrollable element. how can 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 scrollable element.

fiddle me this, batman

http://jsfiddle.net/vuzhl/171/

update

i popover continue floating overtop other elements. when using position:relative; on parent element contains popover instead of letting float on top.

bad

good

parent element (offsetparent) of popover need not be static, postionned relatively document:

position: relative;

see jsfiddle

edit: use case, bind onscroll event of container , 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()             });         });     }); });