第一次懸停時Bootstrap popover偏移量

Question

我希望有人能為這個問題提供解決方案。 我的情況是，我有一個具有引導彈出效果的鏈接，每次將鼠標懸停在它上面時，它都會顯示一個圖像。 但問題是彈出容器總是在您第一次將鼠標懸停在鏈接上時進行偏移。 我的代碼：

我自己的代碼是這樣的：

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

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

 .hover-image {
   width: 180px;
 }

-

 $(document).ready(function() {
  $('[data-toggle="popover"]').popover({
    container: 'body',
    html: true,
    placement: 'left',
    trigger: 'hover',
    content: function() {
        var url = $(this).data('full');
        return '<img class="hover-image" src="' + url + '">'
    }
 });
});

這是一個實例：

小提琴

誰知道如何解決這個問題？

Answer 1

發生這種情況的原因是因為Bootstrap絕對在調用文件后立即將popover定位在文檔上。 然后加載圖像改變彈出高度 - 但是，彈出窗口沒有重新定位。

您可以為彈出窗口設置最小高度，使其不會更改高度，因此無需重新定位。 根據您的示例圖像，將css更改為：

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

Answer 2

問題是在下載圖像之前渲染彈出窗口。

要解決此問題，您可以使用popover插件中的manual選項來定義自定義懸停操作，以在圖像加載后顯示彈出窗口，如下所示：

$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');
    });
});

請看這里的更新小提琴

Answer 3

我的解決方案是在初始化時顯示/隱藏工具提示。 確保關閉動畫，否則會有一連串的內容。 如果你需要動畫，你可以在.tooltip('hide')之后.tooltip('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