将popover对齐到左下角

Question

我怎么能让popover底部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');
                  });

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

工作实例

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 来偏移箭头