Bootstrap PopOver自动调整位置

mpgws1up  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(3)|浏览(153)

我遇到了PopOver的问题。我希望它在所有位置都能自动调整。如果它在右侧找不到空间,它会在左侧打开。但我希望它在顶部/底部也能做同样的事情。也就是说,如果它在顶部找不到空间,它应该在底部打开,反之亦然。难道我没有办法在所有位置都能做到吗?

$('[data-toggle="popover"]').popover({
        trigger: 'manual',
        placement: 'auto right'
    })

HTML

<a data-toggle="popover" class="hlpicon" data-html="true" data-trigger="hover" data-container="body" data-content="This will open a popover" data-original-title="" title=""></a>
kxkpmulp

kxkpmulp1#

您应该能够将placement选项用作字符串或返回字符串的函数

$('[data-toggle="popover"]').popover({
    trigger: 'manual',
    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";
    }
});

对于context,此代码的源代码是Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge?(它声明属性不是必需的--只是将其作为资源添加)。

ssgvzors

ssgvzors2#

选择的解决方案是一个很好的开始,但在我的情况下还不够。我不得不将**position.top替换为$(source).offset().top - $(window).scrollTop()**
这是我的工作解决方案

$('[data-toggle="popover"]').popover({
                        [...]
                        placement: function (context, source) {

                            if ($(source).offset().top - $(window).scrollTop() < 280) {
                                return "bottom";
                            }

                            return "top";
                        }
                    }).popover('show');
kqqjbcuj

kqqjbcuj3#

想想这样会不会帮满于格:

$element.popover("update")

它将很容易地更新弹出窗口。

相关问题