How to Position a Bootstrap Popover

How to position a Bootstrap popover?

This works. Tested.

.popover {
    top: 71px !important;
    left: 379px !important;
}

How can I change the position of Bootstrap 4 popovers?

After messing around with it for a while I figured out I can achieve what I want by using the offset since it does not only accept pixel values, but also % relative to the parent object.

So I'm just doing:

data-offset="-50%"

How to re-position a Bootstrap Popover after dynamic content insertion?

No, there isn't a recalculate and there's really no easy way to do it. That said, you can dynamically inject the popovers this way:

$('td.chartSection').on('mouseenter', function() {
    var myPopOverContent = 'This is some static content, but could easily be some dynamically obtained data.';
    $(this).data('container', 'body');
    $(this).data('toggle', 'popover');
    $(this).data('placement', 'top');
    $(this).data('content', myPopOverContent);
    $(this).popover('show');
});

$('td.chartSection').on('mouseout', function() {
    $(this).popover('hide');
});

Just replace all of your js in your fiddle with the above and check it out...

PopOver auto adjust placement

You should be able to use the placement option as either a string or a function returning a string:

$('[data-toggle="popover"]').popover({
    trigger: 'manual',
    placement: function (context, source) {
        var position = $(source).position();

        if (position.left > 515) {
            return "left";
        }

        if (position.left < 515) {
            return "right";
        }

        if (position.top < 110){
            return "bottom";
        }

        return "top";
    }
});

For context, the source of this code is Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge? (which declares attribution to be not required - just adding this as a resource).

Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge?

I just noticed that the placement option could either be a string or a function returning a string that makes the calculation each time you click on a popover-able link.

This makes it real easy to replicate what you did without the initial $.each function:

var options = {
    placement: function (context, source) {
        var position = $(source).position();

        if (position.left > 515) {
            return "left";
        }

        if (position.left < 515) {
            return "right";
        }

        if (position.top < 110){
            return "bottom";
        }

        return "top";
    }
    , trigger: "click"
};
$(".infopoint").popover(options);

Bootstrap popover - how to set position fixed?

Actually your code is working good and you need to override the margin property with !important to make it center:

.popover{
    position:fixed!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%) translate3d(0,0,0)!important;
    margin: 0!important;
}

Snippet:

<!DOCTYPE html><html><head><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>        /*DEMO*/#demo-buttons{position:absolute;top:10%;left:50%;transform:translate(-50%,-50%)}#demo-element{width:276px;height:200px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;border:1px red solid}
/*popover override*/.popover{    position:fixed!important;    left:50%!important;    top:50%!important;    transform:translate(-50%,-50%) translate3d(0,0,0)!important;    margin: 0!important;
}    </style>    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>    </head><body>    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

<div id="demo-buttons">    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/007bff/ffffff' alt=''>">Popover 1</button>    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/28a745/ffffff' alt=''>">Popover 2</button>    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/dc3545/ffffff' alt=''>">Popover 3</button>    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/6610f2/ffffff' alt=''>">Popover 4</button>
</div>

<!--DEMO ELEMENT AT THE CENTER--><div id="demo-element"></div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script><script>$('[data-toggle="popover"]').popover({    html:       true,    trigger:    'hover',    template:   '<div class="popover" role="tooltip"><h3 class="popover-header"></h3><div class="popover-body"></div></div>',});</script></body></html>

Change top or bottom position of bootstrap popover on content position

You can use data-placement="auto"

When "auto" is specified, it will dynamically reorient the popover.

For example, if placement is "auto left", the popover will display to
the left when possible, otherwise it will display right.

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

.flex {  display: flex;  height: 50vh;  justify-content: space-between;  align-items: flex-start;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="flex">  <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">  Popover Auto position</button>  <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">  Popover Auto position</button>
</div>
<div class="flex" style="align-items: flex-end;">  <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">  Popover Auto position</button>  <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">  Popover Auto position</button></div>

Bootstrap popover position and placement and tip

I'm not a fan of how this works, but essentially you have to create an element that stays in the position you want the popover , and append the popover to it. In this case, I have used the container you already have in place for the tooltip html. I'm creating container ID's dynamically so you don't have to worry about doing that in your html.

So for this HTML:

<div class="form-group pos-relative">
    <label for="ref">Reference</label>
    <input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50">
    <span class="js-tooltip" style="display: none;">
        <p><strong>Your reference is optional.</strong></p>
        <p>Enter a code of your choice for reference purposes.</p>
    </span>
</div>

This CSS:

.pos-relative{
  position:relative;
}
.js-tooltip{
   position:absolute; 
   top:0;
   right:0;
}

And this JS--here's where it happens:

$(function () {

  $('.js-tooltip-trigger').each(function(ind, ele){

    var $ele = $(ele),
        $ttSpan = $ele.next('.js-tooltip'),
        ttHtml = $ttSpan.html(),
        rndID = 'ttid'+ String(Math.random()).substr(2);

    // set the ID, strip the style, and empty the html--
    // we already have it stored in the var above
    $ttSpan.attr('id', rndID).removeAttr('style').html('');

    // make the popovers
    $ele.popover({
        html: true,
        trigger: 'focus',
        placement: 'right',
        container: '#'+rndID, 
        content: ttHtml
    });

  });

});

See it in action here

How to Position a Bootstrap Popover