Question

I have an image on my page and when the user hovers over it with their mouse a tool tip (Using the qtip plugin) is displayed. The only problem with this is when the image loads if the cursor is already hovering over the image the onmouseover event isn’t fired and the tooltip doesn’t show unless the user moves the cursor off the image and then back on. Is their another event I should be using or a better way of doing this?

Answer 1

I wanted to suggest checking if the user is over the image on the image’s onload event, but it seems that there is no way to check the status of the mouse being over the image (at least in jQuery). So, you might want to try using jQuery’s live event with mouseover and mouseout. I have my doubts that this would sidestep the problem, but it’s worth a shot:

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

If that doesn’t work maybe you could 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 their mouse instead of the user having to move their mouse compeltely off the image. Not ideal, but it would work for all but the pausing user.

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