Align popover to bottom left

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:

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

Solution 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

Related:  Missing visible-** and hidden-** in Bootstrap v4

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

References