将弹出框对齐到左下角答案

【问题标题】：Align popover to bottom left将弹出框对齐到左下角
【发布时间】：2020-07-08 00:08:39
【问题描述】：

如何使弹出框底部 div 不超出弹出框按钮右侧，如图所示：

这是我的代码。

HTML：

<a href="#" tabindex="0" class="btn btn" role="button" data-toggle="popover" data-trigger="focus" data-content="<input>">
    Search
</a>

Javascript：

$('[data-toggle="popover"]').popover({
                     trigger: 'manual',
                     placement: 'bottom',
                     html: true
                  }).click(function (e) {
                     e.preventDefault();
                     $(this).popover('show');
                  });

引导：
http://www.bootply.com/3SLzUgPyrV

【问题讨论】：

您可以尝试类似的方法并使其适应您的要求。 bootply.com/NZRFyE1zPw
@Sebsemillia，这就是我需要的，但有什么办法可以消除这种奇怪的重新排列效果？
我用修复创建了一个答案。

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以尝试这样的方法并根据您的要求进行调整：

1.) 通过 CSS 设置箭头的位置：

.popover.bottom .arrow {
    left:90% !important;
}

2.) 设置点击事件后弹出框的位置。使用您的代码示例，它可能如下所示：

$('[data-toggle="popover"]').popover({
                 trigger: 'manual',
                 placement: 'bottom',
                 html: true
              }).click(function (e) {
                 e.preventDefault();
                 // Exibe o popover.
                 $(this).popover('show');

                $('.popover').css('left', '63px'); 
              });

Working Example

【讨论】：

Sebsemilia，有一个问题，如果我调整窗口大小，它将无法正确定位。
是的，当然。我的例子只是一个正确方向的提示。您必须将 $('.popover').css('left', '63px'); 更改为您的项目需求。使用百分比和/或根据视口宽度计算位置..
这里仅作为示例：$('.popover').css('left', $(this).offset().left+'px'); $('.popover .arrow').css('left', ($(this).outerWidth()/2)+'px');

【解决方案2】：

使用 Bootstrap v4，您可以使用 Tether 提供的“偏移”属性：

// Enable all popovers and tooltips
$('[data-toggle="popover"]').popover({
    html: true,
    offset: '0 100px' //offset the popover content
});

这将抵消弹出内容，但您仍然需要使用 CSS 来抵消箭头

【讨论】：

太好了，谢谢 - 使用内置功能总是最好的 ;)

【解决方案3】：

可以使用bottom-end 放置将弹出框相对于父元素的右下角对齐。但是，Bootstrap 弹出窗口不支持。您需要通过 popperConfig 选项将其传递给 Popper，这样：

$('[data-toggle="popover"]').popover({

    // ...

    popperConfig: {
        placement: 'bottom-end',
    },
});

所有支持的展示位置变体是：

top-start
top-end
bottom-start
bottom-end
left-start
left-end
right-start
right-end

【讨论】：

太棒了！但不幸的是，这失去了箭头（github.com/react-bootstrap/react-bootstrap/issues/3951）

【解决方案4】：

我这样做的方法是使用 insert.bs.popover 事件并在那里设置偏移量，因为在此之前弹出框的宽度是未知的。这会将弹出窗口对齐到控件的左侧：

var elWidth = inputElement.width();

inputElement.popover({
    container: 'body',
    animation: true,
    content: Msg,
    placement: 'top',
    trigger: 'hover'
}).on('inserted.bs.popover', function (e) {
    var id = $(this).attr("aria-describedby");
    var popover = $("#" + id);
    popover.data()['bs.popover'].config.offset = parseInt((popover.width() - elWidth) / 2, 10) + 'px';
});

【讨论】：