$(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");
}
});
关于javascript - 包含图像的 jQuery UI 工具提示位置错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43504881/