Bootstrap 3 - 第一次加载页面时弹出错误位置

Question

Bootstrap 3 popper 的容器在用户第一次“悬停”在触发它的元素上时没有正确放置在页面上。第二次开始，就像一个魅力。

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/ （想再次看到需要刷新）

Answer 1

我认为问题是由于图像加载造成的，因此显示后会调整弹出内容的大小。

所以我建议添加 CSS 来修复 popover 内容的大小：

.popover-content {
  min-width: 150px;
  min-height: 150px;
}

和/或预加载图像：

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);

检查这个小提琴：https : //jsfiddle.net/beaver71/sysz405s/

另一种选择是动态放置弹出框：

placement: function(pop, ele) {
    if ($(ele).parent().is('td:last-child')) {
      return 'left';
    }
    return 'right';
},