javascript - bootstrap popover 从上到下动态改变位置

Question

我对引导弹出框有问题，我不知道如何在弹出框到达视口(viewport)顶部时从上到下更改弹出框位置。我试着用

placement: 'auto bottom' 但这对我不起作用。

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

更新

这对我有用，对于顶部的“弹出窗口”，但底部的弹出窗口处于负位置，并且它始终显示在底部

Answer 1

您需要使用 data-placement="auto top" 这将允许 popover 在可能的情况下到达顶部，但如果不可能 - 然后到元素的底部。

总而言之，您陈述了您想要的位置，如果它不能做到这一点，它就会做相反的事情——(与自动左转一样，如果可能，它会允许它向左移动，如果不可能，则允许它向右移动)。

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