jQuery UI tooltip containing an image has wrong position

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");
        }
    });

I'm trying to show a tooltip with an image inside. It seems that if the browser is retrieving the image for the first time, the position of the tooltip is wrong. It doesn't seem to be correctly applying the "flipfit" collision logic and the tooltip is incorrectly positioned outside of the viewable area.

If you uncomment my JavaScript line that allows the browser to use a cached version of the image, the tooltip displays in the desired position, fully visible.

Is there a way to get JQuery UI to correctly calculate the position? I've tried many things and can't get it to work.

Answer 1

I found a solution. If I specify both a width and height for the image content, the positioning is correct. I was only using the width before, since the height varies between the different images I might show. This allows the position to calculate properly. To compensate for the different size images, I added the css "object-fit: cover" to the image, which allows it to be centered and cropped to fit the fixed tooltip window size.

    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

I believe your positioning maybe invalid. I've only ever been aware of valid values such as left center, left top, left bottom, right top, right center, right bottom, top right, top center, top left, bottom left, bottom center, bottom right .

Keep in mind that your container and image should be loaded off screen and visible before you position. Positioning an invisible element that hasn't reached it's proper size will give you strange positions. Make sure your image is loaded, and your container is visible before you position.