jquery - 根据弹出窗口相对于窗口边缘的 X 位置更改 Bootstrap 弹出窗口的位置？

Question

我广泛搜索了互联网，发现这篇 stackoverflow 帖子很有见地 Is it possible to change the position of Bootstrap popovers based on screen width? ，它仍然没有回答我的问题，可能是因为我无法理解位置/偏移量。

这就是我想要做的。我希望 Twitter Bootstap Popover 位置是 RIGHT 除非热点 popover 将位于视口(viewport)之外，然后我希望它位于 LEFT。我正在制作一个具有热点的 iPad 网络应用程序，当您按下热点时，会出现信息，但我不希望它在水平滚动被锁定时出现在视口(viewport)之外。

我想它会是这样的:

$('.infopoint').popover({
        trigger:'hover',
        animation: false,
        placement: wheretoplace 
    });
    function wheretoplace(){
        var myLeft = $(this).offset.left;

        if (myLeft<500) return 'left';
        return 'right';
    }

想法？谢谢!

Answer 1

我刚刚注意到 placement 选项可以是一个字符串 或一个返回字符串的函数，它会在您每次点击时进行计算在可弹出链接上。

这使得在没有初始 $.each 函数的情况下复制您所做的事情变得非常容易:

var options = {
    placement: function (context, source) {
        var position = $(source).position();

        if (position.left > 515) {
            return "left";
        }

        if (position.left < 515) {
            return "right";
        }

        if (position.top < 110){
            return "bottom";
        }

        return "top";
    }
    , trigger: "click"
};
$(".infopoint").popover(options);