Position bootstrap popover with 20px 'margin' to window edge

Question

I've been asked if I can get our bootstrap popovers avoiding the left and right window edges. I've been reading the bootstrap site, the tether site and SO..
Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge?
...but so far haven't found something that can set a minimum pixel distance to the right and left edges of the window.
I've tried to get the .css('left') value of the open popover, but all I'm getting is 'undefined'.

I have a link with an onclick attribute that points to the following function (which, other than the positioning issue, initialises the popover correctly)...

function emailCertificateClick(e) {
    var emailLink = $(e);
    var attemptId = $(emailLink).attr("data-attempt-id");
    var url = "/CL/MyTraining/EmailCertificate/?attemptId=" + attemptId;
    $.get(url, function (data) {

        var popover = emailLink.data('bs.popover');

        if (data && data.Result == "Success") {
            popover.options.title = '<div class="certificate-email-success-popover-title">';
            popover.options.title += '<span class="fa fa-check">';
            popover.options.title += '<svg>';
            popover.options.title += '<use xlink:href="/Areas/CL/Content/app/images/icons/icon-svg-defs.svg#fa-check"></use>';
            popover.options.title += '</svg>';
            popover.options.title += certificateSentSuccessfullyTitle;
            popover.options.title += '</span>';
            popover.options.title += '</div >';
            popover.options.content = certificateSentSuccessfullyMessage + ' <b>' + data.Email + '</b>';
        }
        else {
            popover.options.title = '<div class="certificate-email-error-popover-title">';
            popover.options.title += '<span class="fa fa-times">';
            popover.options.title += '<svg>';
            popover.options.title += '<use xlink:href="/Areas/CL/Content/app/images/icons/icon-svg-defs.svg#fa-times"></use>';
            popover.options.title += '</svg>';
            popover.options.title += certificateEmailFailedTitle;
            popover.options.title += '</span>';
            popover.options.title += '</div >';
            popover.options.content = certificateEmailFailedMessage;
        }

        popover.show();
        var $popover = $('.my-training-certficate .popover'); 
        console.log("$popover = " + $popover); // [object Object]
        var popoverXPosition = $popover.css('left');
        console.log("popoverXPosition = " + popoverXPosition); // undefined       
    });

    return false;
}

Inspecting the open popover in dev tools, I can see that the popover does, indeed, have its css('left') set to '-165px'. I have not been able to find how or where that is set.

Is there a best practise, non-workaround way to prevent bootstrap popovers from touching the window edges? Cheers.