Question

I have a jsfiddle here

    $(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正确计算位置？我尝试过很多东西而无法让它发挥作用。

Answer 1

我找到了解决方案。如果我同时指定图像内容的宽度和高度，则定位是正确的。我以前只使用宽度，因为我可能会显示的不同图像之间的高度不同。这允许位置正确计算。为了补偿不同尺寸的图像，我在图像中添加了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");
        }
    });

Answer 2

我相信你的定位可能无效。我只知道有效的值，例如left center, left top, left bottom, right top, right center, right bottom, top right, top center, top left, bottom left, bottom center, bottom right。

请记住，您的容器和图像应在屏幕上加载并在您定位之前可见。定位一个未达到正确尺寸的隐形元素会给你带来奇怪的位置。确保您的图像已加载，并且在您放置之前可以看到您的容器。

包含图像的jQuery UI工具提示位置错误

2 个答案: