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

这是一个实例：

Fiddle

任何人都知道如何解决这个问题？

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

请参阅here了解更新小提琴

Answer 3

我的解决方案只是在初始化时显示/隐藏工具提示。确保关闭动画，否则会有内容闪烁。如果您需要动画，可以在.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

第一个悬停时的Bootstrap popover偏移量

3 个答案: