JQuery hover method?

Question

I have an image on my page, and when the user hovers their mouse over it, a tooltip is displayed (using the qtip plugin). The only problem with this is when the image is loading, if the cursor is already hovering over the image, the onmouseover event is not triggered and the tooltip is not displayed if the user does not move the cursor from the image and then turns on again. Is this their other event that I should use or the best way to do this?

Answer 1

I would suggest checking if the user is above the image on the onload event of the image, but there seems to be no way to check the state of the mouse over the image (at least in jQuery). So you can try to use the jQuery live event with mouseover and mouseout . I have doubts that this will cost the problem, but it's worth it:

 jQuery(function(){ $('img.has_tooltip').live('mouseover', function(){ $(this).showTooltip(); }); $('img.has_tooltip').live('mouseout', function(){ $(this).hideTooltip(); }); }); 

If this does not work, perhaps you can use the mousemove event:

 jQuery(function(){ $('img.has_tooltip').mousemove(function(){ $(this).showTooltip(); }); $('img.has_tooltip').live('mouseout', function(){ $(this).hideTooltip(); }); }); 

This should work as soon as the user moves his mouse, instead of the user having to move his mouse away from the image. Not perfect, but it will work for everyone except user pauses.

Of course, with both of these examples, switch the xxxTooltip methods with the correct one from the qtip plugin.