Solved

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

Posted on 2010-09-21
7
819 Views
Last Modified: 2012-05-10
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');
		
	});

Open in new window

0
Comment
Question by:Oliver2000
  • 5
  • 2
7 Comments
 
LVL 6

Expert Comment

by:reiters
ID: 33732115
Is it because you are still fading out tooltip 1 while tooltip 2 is being faded in...maybe add a $('#tooltip').hide() to the beginning of $(".tip").mouseover(function(e) so that if you mouse over a second image before the fadeout is complete then it will hide immediately so the fadein on the second tooltip can happen without interference.
0
 
LVL 6

Expert Comment

by:reiters
ID: 33732125
jQuery animations also have a queue system that I have never used.  Maybe queue the animations so they happen in order without overlap.  You would just have to try that and see how it "feels".
0
 

Author Comment

by:Oliver2000
ID: 33735218
Hi reiters,

I tried the .hide version but it does not have any effect. I am not sure what you mean with the animation queue. I dont use the queue in the moment at all.

It would help if the tooltip acctually only starts after the mouse rests for like a half second. because if the user still move he would not even start to fade in. Do you have any idea how to delay the entire tooltip fadein ? hmm maybe with .delay command. i try a little bit.
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 6

Accepted Solution

by:
reiters earned 500 total points
ID: 33737892
What about something like this?
$(".tip").mousemove(function(e) {
			$('#tooltip').css('top', e.pageY + 10 );
			$('#tooltip').css('left', e.pageX + 20 );
			});
		$(".tip").hover(
			function (e) {
				var tip_text = $(this).attr("rel");
				$(this).data('timeout', setTimeout(
					function () {
						$("#tipBody").html(tip_text);
						$('#tooltip').fadeIn('fast');
						}, 1000));},
					function () {
						clearTimeout($(this).data('timeout'));
						$('#tooltip').fadeOut('fast');
						});

Open in new window

0
 
LVL 6

Expert Comment

by:reiters
ID: 33737909
Oh and I switched to using "rel" instead of "title" so you dont have to mess with shutting off the default title action.

<span class="tip" rel="one">1</span>
0
 

Author Closing Comment

by:Oliver2000
ID: 33748569
Excellent! Your version is not only working but also smaller and better. Of course your way to use REL instead of TITLE is better and now works without the blinking problem and i can even adjust the delay.

You made my day :)

thanks a lot.
0
 
LVL 6

Expert Comment

by:reiters
ID: 33748945
Glad I could help.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question