Jquery 根据弹出框相对于窗口边缘的 X 位置更改 Bootstrap 弹出框的位置

发布于09月30日

I have scoured the Internet far and wide and while I found this stackoverflow post insightful Is it possible to change the position of Bootstrap popovers based on screen width?, it still didn't answer my question, likely due to my trouble understanding position/offset.

这就是我想要做的.我希望Twitter Bootstap弹出窗口的位置是正确的，除非热点弹出窗口将位于视口之外，然后我希望它位于左侧.我正在制作一款有热点的iPad web应用，当你按下热点时，信息会出现，但我不想让它在水平滚动被锁定时出现在视口之外.

I'm thinking it'd go something like this:

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

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

Thoughts? Thanks!

推荐答案

我刚刚注意到，placement选项可以是string或function returning a string，每次您单击可弹出的链接时都会进行计算.

This makes it real easy to replicate what you did without the initial $.each function:

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