Align popover to bottom left

问题

How could I make the popover bottom div do not go beyond the popover button right side, like in the image:

Here's my code.

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

回答1:

You could try something like this and adapt it to your requirements:

1.) Set the position of the arrow via CSS:

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

2.) Set the position of the popover after the click event. With your code example it could look like this:

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

回答2:

With Bootstrap v4, you can use the 'offset' property provided by Tether:

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

This will offset the popover content, but you will still need to use CSS to offset the arrow

回答3:

The way I did it is to use the inserted.bs.popover event and set the offset there, since the width of the popover is unknown until then. This aligns the popup window to the left of the control:

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

回答4:

It's possible to use bottom-end placement to align the popover relative to the bottom right of the parent element. However, that's not supported by Bootstrap popover. You'll need to pass that to Popper through popperConfig option, this way:

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

    // ...

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

All the supported placement variations are:

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

来源：https://stackoverflow.com/questions/27110377/align-popover-to-bottom-left