[英]jQuery UI tooltip containing an image has wrong position
$(document).tooltip({
items : "[title]",
position : {
my: "left+35",
at: "right+10",
collision: "flipfit"
},
content : function() {
var cache = new Date().getTime();
// Uncomment this next line and the tooltip looks correct after the image is retrieved
//cache = "";
return '<img src="https://g.foolcdn.com/editorial/images/225916/getty-apple_large.jpg?' + cache + ' width="600">';
},
open : function(event, ui) {
ui.tooltip.css("min-width", "600px");
}
});
我正在尝试显示带有图像的工具提示。 看来,如果浏览器是第一次检索图像,则工具提示的位置是错误的。 似乎没有正确应用“ flipfit”碰撞逻辑,并且工具提示错误地定位在可见区域之外。
如果取消注释允许浏览器使用图像缓存版本的JavaScript行,则工具提示将显示在所需位置,完全可见。
有没有办法让JQuery UI正确计算位置? 我尝试了很多事情,但无法正常工作。
我找到了解决方案。 如果我为图像内容指定宽度和高度,则定位是正确的。 我以前只是使用宽度,因为高度可能会在我可能显示的不同图像之间变化。 这样可以正确计算头寸。 为了补偿不同大小的图像,我在图像中添加了css“ object-fit:cover”,可以将其居中并裁剪以适合固定的工具提示窗口大小。
var image = 'https://g.foolcdn.com/editorial/images/225916/getty-apple_large.jpg';
$(document).tooltip({
items : "[title]",
position : {
my: "left+35",
at: "right+10",
collision: "flipfit"
},
content : function(event, ui) {
return '<img src="' + image + '" width="600" height="400" style="object-fit: cover;">';
},
open : function(event, ui) {
ui.tooltip.css("min-width", "600px");
}
});
我相信您的定位可能无效。 我只知道有效的值,例如left center, left top, left bottom, right top, right center, right bottom, top right, top center, top left, bottom left, bottom center, bottom right
。
请记住,您的容器和图像应在屏幕外加载并在放置之前可见。 放置尚未达到其适当大小的不可见元素会给您奇怪的位置。 在放置图像之前,请确保已加载图像,并且容器可见。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.