Javascript 第一次悬停时的引导弹出框偏移量

我希望有人能为这个问题提供解决方案。我的情况是，我有一个链接，有一个引导弹出效果，每次你悬停在它上面，它会显示一个图像。但问题是，当您第一次将鼠标悬停在链接上时，popover容器总是偏移。我的代码：

我自己的代码是：

 <a href="{% url 'consilium:detail' movie.slug %}" class="thumbnail title-link" {% if movie.image %} data-toggle="popover" data-placement="left" data-full="{{movie.image.url}}" {% endif %}>
   <span class="flex-input">
     <input class="get-title" value="{{ movie.title }}" form="movie{{ forloop.counter }}" name="title" readonly/>
   </span>
 </a>

-

$（文档）.ready（函数（）{
$（'[data toggle=“popover”]'）。popover({
容器：'主体'，
是的，
位置：'左'，
触发器：“悬停”，
内容：函数（）{
var url=$（this.data（'full'）；
返回“”
}
});
});

下面是一个活生生的例子：

---

有人知道怎么解决吗

发生这种情况的原因是，引导绝对值在调用popover时立即将其定位到文档上。然后加载图像，更改popover高度-但popover不会重新定位

您可以为popover设置最小高度，使其不改变高度，因此不需要重新定位。根据示例图像，将css更改为：

body .popover {
    max-width: 240px;
    min-height: 160px;
}

---

问题是，在下载图像之前呈现了popover

要解决此问题，可以使用popover插件中的

手动

选项定义自定义悬停动作，以便在图像加载后显示popover，如下所示：

$this.on('mouseenter', function(){
    var image = new Image();
    image.onload=function(){
        $this.popover('show');//Show popover after image loads
    }
    image.src=url; //Preload image in memory
    }).on('mouseleave', function(){
        $this.popover('hide');
    });
});

---

请参阅以获取更新FIDLE的信息

我的解决方案只是在初始化时显示/隐藏工具提示。确保关闭动画，否则会出现内容闪烁。如果需要动画，可以在

之后重新启用。工具提示（“隐藏”）

$（'.xyz'）。工具提示({
标题：“xyz”，
是的，
位置：'自动'，
动画：错误
}).tooltip（'show'）。tooltip（'hide'）/.data（'bs.tooltip'）。options.animation=true

body .popover {
    max-width: 240px;
    min-height: 160px;
}

$this.on('mouseenter', function(){
    var image = new Image();
    image.onload=function(){
        $this.popover('show');//Show popover after image loads
    }
    image.src=url; //Preload image in memory
    }).on('mouseleave', function(){
        $this.popover('hide');
    });
});

$('.xyz').tooltip({
    title: "xyz <img src='https://www.idk.com/test.png'alt='blah'/>", 
    html: true,
    placement: 'auto',
    animation: false
}).tooltip('show').tooltip('hide') //.data('bs.tooltip').options.animation=true