Solved

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

Posted on 2010-09-21
7
823 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
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 
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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

730 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