JQuery ui collision not triggering at first hover

Question

I have the following code:

jQuery(function () {
    jQuery('.tooltip').tooltip({
        position: {
            my: "left top",
            at: "right top",
            collision: "flip fit"
        },
        content: function () {
            var element = jQuery(this);
            if (element.is("[rel]")) {
                var text = element.attr("rel");
                return '<div><img class="map" src="' + text + '"></div>';
            }
            if (element.is("[title]")) {
                return element.attr("title");
            }
            if (element.is("img")) {
                return element.attr("alt");
            }
        }
    });
});

This works as expected but only after the initial hover (hover over "rel" element).
On the first mouse hover the tooltip appears but collides with the window (the image is not flipped or re-sized). Starting from the 2nd hover, the tooltip is flipped and re-sized as needed.
I've inspected the "tooltip" elements both before the 1st hover and after it, but I haven't found any differences. I've also checked the CSS for each element with the same no-result.
Any ideas would help, thanks.

EDIT:
live site here : http://castle.staging.wpengine.com/themes/
if you check the website make sure the image is in collision with the browser(you may have to resize your browser if you have a huge screen)

Some images to point out the issue:

with 1st hover: http://imagebin.org/272007

2nd hover: http://imagebin.org/272008

And another image(bottom fit not working:)

first hover: http://imagebin.org/272009

2nd hover: http://imagebin.org/272010

apaul34208: I've edited the post and now includes a link that shows the webpage that has the issue. thanks — jnhghy - Alexandru Jantea, Sep 26 '13 at 17:01
How about setting just a min-width and min-height on the images before they load? Otherwise you will need to prime the data- attributes with actual sizes server-side as LeGEC suggests. It will still jump as the aspect ratio won't match, but might be more acceptable as it is probably doing this on subsequent images anyway. Personally I would go with LeGEC's suggestion for now, unless you feel like changing the plugin to load the images and then display the tooltip (it might just have a bug in its initial state). — iCollect.it Ltd, Oct 03 '13 at 08:12
@TrueBlueAussie Thanks for the suggestion, I really didn't understand why the images had different sizes with different hovers. your jsfiddle really helped me understand, at this point I'll wait another day or so and if no better solution, I'll modify the plugin(modifying the plugin is the best solution at this point). — jnhghy - Alexandru Jantea, Oct 03 '13 at 09:30

LeGEC · Answer 1 · 2013-10-02T07:02:32.190

0

I suspect the tooltip placement is computed before the image is actually loaded, and therefore before the actual image's dimensions are known.

Since you know in advance the size of your image (your images' filenames suggest so), you can try to hard set the img size as css attributes, e.g. :

if ( element.is( "[rel]" ) ) {
  var text = element.attr( "rel" );

  var width = element.attr('data-imagewidth');   // this or extract width from img filename
  var height = element.attr('data-imageheight'); // this or extract width from img filename

  return '<div><img class="map" width="'+width'+" height="'+height+'" src="' + text + '"></div>';
}

The tooltip doc also mentions a callback mechanism. You can try to load the image and display the tooltip only once it is loaded :

content: function(callback) {
    ...
    if ( element.is( "[rel]" ) ) {
        var image = new Image();
        image.onload = function(){
            image.onload = null;
            callback(image);
        }
        image.src = element.attr('rel');
        return;
    }
    ...
}

edited Oct 02 '13 at 07:02

answered Oct 01 '13 at 12:32

LeGEC

46,477
5
57
104

Did a quick mockup of your idea (just fixed the dimensions to 100 x 100) and it does appear to solve the problem of the size being initially unknown: http://jsfiddle.net/fHt5J/ No glitch. – iCollect.it Ltd Oct 02 '13 at 09:22
@TrueBlueAussie Thank you for your trouble, I've tried on that jsfiddle.net/fHt5J to increase the width of the image to a fixed 450px but it makes the image get out of the frame, it is because the frame has a max width?(didn't see one) or again is because the frame also has problems getting the width in time? – jnhghy - Alexandru Jantea Oct 03 '13 at 06:00
@LeGEC: didn't have time yet but I'll get on it today. Thank you – jnhghy - Alexandru Jantea Oct 07 '13 at 12:45

score 0 · Answer 2 · edited May 23 '17 at 10:31

Your problem is related to lots of js scripts which adds a weight to your site and that's why ready event triggers lately, but you use can tooltip out of document.ready using delegation, right after jquery.ui script inclusion:

jQuery(document).tooltip({
    items: '.tooltip',
    position: function() {
        ...
    },
    content: function () {  
        ...
    }
})

Btw to improve user expirience (preview images may load slow) you can tweak the design of your tooltip container:

set min-width/min-height
set loading image as a background

It's not good idea to use image.onload event cuz it may not fire for cached images at least in IE and asynchronous tooltips are quite confusing for users and has its own pitfalls (look at this question cancel jquery tooltip during dynamic loading of content)

JQuery ui collision not triggering at first hover

2 Answers2