jquery tooltip delay problem. (tooltip starts blinking for no reason)

Hi there,

I have a tooltip running with jquery. So far works all fine but i do have one problem. The tooltip appear for several small images which are side by side. The fade in and out okay but the problem is if the user move with the mouse for example from the left to the right side (fast) and over several images... the tooltip appear than for the last one correct but he blinks (on off on off) for the same number of images the mouse run over.

It is a little bit hard to explain so i try again. Lets say the tooltip if for 10 images side by side. Now the user starts to move with the mouse on the left side and move over the first 5 images to image number 6. The tooltip appear now but blinks 5 times because the script seem to want to still run the first 5 tooltips before. How ever the text from the correct tooltip appear he just blinks 5 times. (or depending on the images the use moved before above)

Would be nice if somebody has any tip for me. I think the solution would be to somehow not act immediately but only after the user pause for some milliseconds on one image but i dont see where to place this delay.

below me curreny code...(I use as selector .class)

//Append the tooltip template and its value to document.body!	
	$(document.body).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody" id="tipBody"></div><div class="tipFooter"></div></div>');
	
	//Select all anchor tag with rel set to tooltip
	$(".tip").mouseover(function(e) {
		//Grab the title attribute's value and assign it to a variable
		var tip = $(this).attr('title');	
		
		//Remove the title attribute's to avoid the native tooltip from the browser
		$(this).attr('title','');
		
		$("#tipBody").html(tip);
		
		//Show the tooltip with faceIn effect
		$('#tooltip').fadeIn('fast');
		
	}).mousemove(function(e) {
	
		//Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
		$('#tooltip').css('top', e.pageY + 10 );
		$('#tooltip').css('left', e.pageX + 20 );
		
	}).mouseout(function() {
	
		//Put back the title attribute's value
		$(this).attr('title',$('.tipBody').html());
	
		//Remove the appended tooltip template
		//$(this).children('div#tooltip').remove();
		$('#tooltip').fadeOut('fast');
		
	});

Select allOpen in new window