Question

如何使popover底部div不会超出右侧的弹出框按钮，如图中所示： enter image description here

这是我的代码。

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

Bootply：
http://www.bootply.com/3SLzUgPyrV

Answer 1

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

1。）通过CSS设置箭头的位置：

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

2。）在click事件后设置popover的位置。使用您的代码示例，它可能如下所示：

$('[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

Answer 2

使用Bootstrap v4，您可以使用Tether提供的'offset'属性：

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

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

Answer 3

我这样做的方法是使用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';
});

Answer 4

可以使用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

将popover对齐到左下角

4 个答案: