自举弹出窗口动态更改位置从上到下

Question

I have a problem with bootstrap popover, i can't figure how to change popover position from top to bottom when it reaches top of the viewport. I tried to use

placement: 'auto bottom' but this doesn't work for me.

$(function(){
var options = {
    placement: function (context, element) {
        var position = $(element).position();
        console.log(position.top - $(window).scrollTop());
        if (position.top - $(window).scrollTop() < 110){
            return "bottom";
        }
        return "top";
    }, html: true
};
$(".popover-link").popover(options);
});

update

this worked for me, for "popover" in top, but popover at the bottom gets negative position, and it's always shows at the bottom

Answer 1

you need to use data-placement="auto top" which will allow the popover to go to the top if possible but if not - then to the bottom of the element.

To summarise you state the position that you want and if it can't do that it does the opposite - (same as auto left will allow it to go left if possible but right if not).

<a href="#" title="Sample Title" data-toggle="popover" data-placement="auto top" data-content="Sample Content">Click</a>

Answer 2

Just do it by data-placement="bottom"

 <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>

Hope it Helps.