包含圖像的jQuery UI工具提示位置錯誤

Question

我在這里有一個jsfiddle 。

    $(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 。

請記住，您的容器和圖像應在屏幕外加載並在放置之前可見。 放置尚未達到其適當大小的不可見元素會給您奇怪的位置。 在放置圖像之前，請確保已加載圖像，並且容器可見。