bootstrap popover arrow goes away when I add scrollbar to popover window

Question

I get the arrow when there is no scrollbar but it goes away when I add scroll bar to the popover content. I couldn't get it running on jsfiddle. So i am posting the code here.

CSS

.pop-div .popover {
    max-width: 310px;
    height: 250px;
    overflow-y:scroll;
}

HTML

<li>
    <div class="pop-div">
        <a href="#" id="myid" rel="popover" >click me</a>
    </div>
</li>

JAVASCRIPT

$("a[rel=popover]").click(function(e) {
    e.preventDefault();
    $.ajax({
        url: '/myurl',
        success: function(data) {
            $("#myid").popover({
                placement: 'top',
                title:'title',
                html:true,
                content:data
            });
        }
    });
 });

Answer 1

That's because the arrow is supposed to appear below the popover but since you are telling it to scroll vertically, it can't "get out" of the parent. I suggest you use the .popover-content class provided by Bootstrap to enable scrolling on the inner content only

CSS

.pop-div .popover-content {
    max-width: 310px;
    height: 250px;
    overflow-y:scroll;
}

Demo fiddle