bootstrap popover 从上到下动态改变位置答案

【问题标题】：bootstrap popover dynamic change position from top to bottombootstrap popover 从上到下动态改变位置
【发布时间】：2017-02-17 11:17:27
【问题描述】：

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

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

更新

这对我有用，顶部的“popover”，但底部的 popover 处于负位置，它总是显示在底部

【问题讨论】：

请通过发布相关代码来澄清您的问题，并向我们展示哪些应该有效，哪些无效。

标签： javascript jquery html css bootstrap-popover

【解决方案1】：

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

总结一下，你说明你想要的位置，如果它不能做到，它会做相反的 - （与 auto left 一样，如果可能的话，它会允许它向左移动，否则向右移动）。

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

【讨论】：

我试过这种方法，但是当popover到达顶部时，它仍然显示在顶部

【解决方案2】：

只需通过 data-placement="bottom" 完成

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

希望对你有帮助。

【讨论】：