Solved

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

Posted on 2010-09-21
7
817 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 6

Accepted Solution

by:
reiters earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Glad I could help.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
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 …
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…
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)

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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now