[英]Bootstrap popover offset on first hover
我希望有人能为这个问题提供解决方案。 我的情况是,我有一个具有引导弹出效果的链接,每次将鼠标悬停在它上面时,它都会显示一个图像。 但问题是弹出容器总是在您第一次将鼠标悬停在链接上时进行偏移。 我的代码:
我自己的代码是这样的:
<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 + '">'
}
});
});
这是一个实例:
谁知道如何解决这个问题?
发生这种情况的原因是因为Bootstrap绝对在调用文件后立即将popover定位在文档上。 然后加载图像改变弹出高度 - 但是,弹出窗口没有重新定位。
您可以为弹出窗口设置最小高度,使其不会更改高度,因此无需重新定位。 根据您的示例图像,将css更改为:
body .popover {
max-width: 240px;
min-height: 160px;
}
问题是在下载图像之前渲染弹出窗口。
要解决此问题,您可以使用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');
});
});
请看这里的更新小提琴
我的解决方案是在初始化时显示/隐藏工具提示。 确保关闭动画,否则会有一连串的内容。 如果你需要动画,你可以在.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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.