Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2010-09-21
7
Medium Priority
?
827 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

636 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