Bootstrap 3 Popover首次悬停触发时容器位置异常问题求助

这个问题我之前也碰到过，核心原因是首次触发Popover时，动态内容（比如你代码里的图片）还没完成加载——Bootstrap没办法准确计算Popover的实际尺寸，导致定位直接跑偏。第二次触发时内容已经加载完毕，尺寸计算正常，位置自然就对了。

下面给你几个可行的解决办法：

方法1：预定义内容固定尺寸（最省心） #

既然问题出在尺寸计算不准确，那我们直接给Popover里的内容提前设置固定宽高，让Bootstrap首次渲染就能拿到准确的尺寸值：

修改你的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" style="width:150px;height:150px;"/>'; 
  } 
});

这种方法最简单直接，只要内容尺寸固定，就能从根源避免定位错误。

方法2：内容加载完成后手动重定位 #

如果不想固定尺寸，可以在Popover显示后，等图片加载完成再触发一次重定位。利用shown.bs.popover事件结合图片的load事件实现：

$('.popover-me').popover({ 
  html: true, 
  trigger: 'hover', 
  placement: 'auto right', 
  container: 'body', 
  title: 'Title', 
  content: function(){ 
    return '<img src="http://via.placeholder.com/150x150"/>'; 
  } 
}).on('shown.bs.popover', function() {
  var $popover = $(this).data('bs.popover').$tip;
  var $img = $popover.find('img');
  // 检查图片是否加载完成，未完成则等加载后重新触发悬停
  if (!$img[0].complete) {
    $img.on('load', function() {
      $(this).closest('.popover').hide();
      $(this).trigger('mouseenter');
    });
  }
});

这个逻辑会在Popover首次显示后，判断图片状态，未加载完成的话就等加载结束后重新触发悬停，让Popover重新计算定位。

方法3：提前预加载内容 #

我们也可以在页面加载时，把Popover里的图片提前加载到浏览器缓存中，这样首次触发时图片已经就绪，尺寸能被正确计算：

在页面底部添加一段预加载代码：

// 预加载Popover中的图片
var preloadImg = new Image();
preloadImg.src = "http://via.placeholder.com/150x150";

浏览器会提前加载这张图片，等用户首次悬停时，图片已经在缓存里了，Popover的尺寸计算自然不会出错。

你可以根据自己的业务场景选择合适的方法，我个人更推荐方法1，操作成本最低，效果也最稳定~

内容的提问来源于stack exchange，提问作者Stavm