Question

我正面临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>

Answer 1

您应该能够将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";
    }
});

对于上下文，此代码的来源为Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge?（声明归属不是必需的 - 只需将其添加为资源）。

Answer 2

选择的解决方案是一个好的开始，但就我而言还不够。我必须将 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');

PopOver自动调整位置

2 个答案: