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

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)

score 9 · Accepted Answer · answered Jan 22 '18 at 08:35

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';
},

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

1 Answers1