Align popover to bottom left

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

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

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