Bootstrap 3 - Popover in wrong position the first time page loads - twitter-bootstrap-3

Question

Bootstrap 3 popper's container is not correctly placed on the page the first time the user 'hovers' over the element triggering it. the second time onward, works like a charm.
HTML:
<table>
<thead>
<th>1</th>
<th>2</th>
<th>3</th>
</thead
<tbody>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>
<span class="glyphicon glyphicon-cog popover-me"></span>
</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
</tbody>
</table>
JS:
$('.popover-me').popover({
html: true,
trigger: 'hover',
placement: 'auto right',
container: 'body',
title: 'Title',
content: function(){
return '<img src="http://via.placeholder.com/150x150"/>';
}
});
JSFiddle: https://jsfiddle.net/wp083g18/2/
(you need to refresh if you want to see it again)

Answer 1

I think the problem is due to image loading, so the popover content is resized after showing.
So I suggest to add CSS to fix size of popover content:
.popover-content {
min-width: 150px;
min-height: 150px;
}
and/or preload image:
var img_url = "https://via.placeholder.com/150x150";
function preloadImage(url) {
console.log("preloadImage: "+url);
var img = new Image();
img.src = url;
}
preloadImage(img_url);
Check this fiddle: https://jsfiddle.net/beaver71/sysz405s/
Another option is dynamic placement of popover:
placement: function(pop, ele) {
if ($(ele).parent().is('td:last-child')) {
return 'left';
}
return 'right';
},