根据与窗口边缘相关的弹出窗口X位置更改Bootstrap弹出窗口的位置？

Question

我已经远远地搜索了互联网,而我发现这个stackoverflow帖子很有见地是否有可能根据屏幕宽度改变Bootstrap popovers的位置？,它仍然没有回答我的问题,可能是由于我理解位置/偏移的麻烦.

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

我在想它会是这样的:

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

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

思考？谢谢!

Answer 1

我刚才注意到,放置选项可能是某个字符串或返回一个字符串函数,使得每次点击酥料饼,能够链路上的计算.

这使得在没有初始$ .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);

Answer 2

根据文档,您应该能够auto与首选位置结合使用,例如auto left

http://getbootstrap.com/javascript/#popovers:"当指定"auto"时,它将动态地重定向弹出窗口.例如,如果放置是"自动离开",则工具提示将尽可能显示在左侧,否则它会正确显示."

我试图做同样的事情然后意识到这个功能已经存在.

Answer 3

对于Bootstrap 3,有

placement: 'auto right'

这更容易.默认情况下,它是正确的,但如果元素位于屏幕的右侧,则会保留弹出窗口.所以它应该是:

$('.infopoint').popover({
   trigger:'hover',
   animation: false,
   placement: 'auto right'
});

Answer 4

所以我想出了一种有效地做到这一点的方法.对于我的特定项目,我正在建立一个iPad网站,所以我确切地知道像素X/Y值到达屏幕边缘的是什么.你的thisX和thisY值会有所不同.

由于无论如何都是通过内联样式放置弹出窗口,我只需抓住每个链接的左侧和顶部值来确定弹出窗口的方向.这是通过附加.popover()在执行时使用的html5数据值来完成的.

if ($('.infopoint').length>0){
    $('.infopoint').each(function(){
        var thisX = $(this).css('left').replace('px','');
        var thisY = $(this).css('top').replace('px','');
        if (thisX > 515)
            $(this).attr('data-placement','left');
        if (thisX < 515)
            $(this).attr('data-placement','right');
        if (thisY > 480)
            $(this).attr('data-placement','top');
        if (thisY < 110)
            $(this).attr('data-placement','bottom');
    });
    $('.infopoint').popover({
        trigger:'hover',
        animation: false,
        html: true
    });
}

任何评论/改进都是受欢迎的,但如果您愿意手动设置这些值,则可以完成工作.