Bootstrap 3 - 首次加载页面时弹出窗口位置错误

Question

Bootstrap 3 popper 的容器在用户第一次 'hovers' 触发它的元素时未正确放置在页面上。第二次开始，效果很好。

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-content {
  min-width: 150px;
  min-height: 150px;
}

and/or 预加载图像：

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

检查此 fiddle：https://jsfiddle.net/beaver71/sysz405s/

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

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

Bootstrap 3 - 首次加载页面时弹出窗口位置错误

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

twitter-bootstrap-3

popper.js