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/

另一种选择是动态放置popover：

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

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

1 个答案: