?
Solved

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

Posted on 2010-09-21
7
Medium Priority
?
826 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 6

Accepted Solution

by:
reiters earned 2000 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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Suggested Courses

762 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