jquery tool tip bug results in javascript error on first use...

I have an annoying bug on my tool tip code where the first time the tool tip is used it results in an error :
Line: 10 Error: 'tip' is undefined

Open in new window


The actuale line it is reffering to is:

var tipWidth = tip.width(); //Find width of tooltip

Open in new window


The HTML code looks like this:
<dl>
	<dt class = "mandatory">Email</dt>
	<dd><input name="email" type="text" style="width: 29.5em;" maxlength="50"/><img src="images/tooltip.png" alt="" class="tip_trigger"/><div class="tip"><h1>Email</h1><p>Please enter a valid email. This email will be used to notify you when other users make contact with you.</p><p class="small red">Please Note: This email will not be shared with other users.</p></div></dd>
</dl>

Open in new window


The CSS is this:

.tip {
	background-image: url(../images/background-tool-tip.png);
	background-repeat: repeat;
	border-radius: 4px;
	border-color: #32527C;
	border-style: solid;
	border-width: 1px;
	color: #333;
	display: none;
	padding: 10px;
	position: absolute;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	z-index: 1000;
	width: 200px;
	line-height: normal;
}
.tip h1{
	color: #333333;
	font-size: 14px;
	margin: 0px 0px 5px 0px;
	padding: 0px 0px 0px 0px;
}
.tip h1 .small{
	font-size: 11px;
	font-weight: normal;
}
.tip p{
	color: #333333;
}
.tip p.small{
	font-size: 11px;
	font-weight: bold;
}
.tip p.red{
	color: #FF0000;
}

Open in new window


The JQuery is this:

$(window).load(function(){
	$(".tip_trigger").hover(function(){
		tip = $(this).parent().find('.tip').animate({opacity:"toggle"},200);//Show tooltip
	}, function() {
		tip = $(this).parent().find('.tip').animate({opacity:"toggle"},150);//Show tooltip
	}).mousemove(function(e) {
		var mousex = e.pageX + 20; //Get X coodrinates
		var mousey = e.pageY + 20; //Get Y coordinates
		var tipWidth = tip.width(); //Find width of tooltip
		var tipHeight = tip.height(); //Find height of tooltip
		//Distance of element from the right edge of viewport
		var tipVisX = $(window).width() - (mousex + tipWidth);
		//Distance of element from the bottom of viewport
		var tipVisY = $(window).height() - (mousey + tipHeight);
		if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
			mousex = e.pageX - tipWidth - 20;
		} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
			mousey = e.pageY - tipHeight - 20;
		} 
		tip.css({  top: mousey, left: mousex });
	});
});

Open in new window


Any help in fathoming this out would be greatly appreciated.

Kind regards,
LVL 2
splantonAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
What is "tip" and when and when is it defined?
Make sure the script file containing this object is defined before it's required.
0
splantonAuthor Commented:
'tip' is a css styled image... it is there.

The code 'works' fine - the help/tool tips are displayed correctly but on the first time a mouse enters the 'tip' image to fire the code it produces a javascript error as described above.

My client is going to find this - he switches on debugging to test stuff - believe me!
0
Rainer JeschorCommented:
Hi,
just add this inside of your mousemove function:
var tip = $(this).parent().find('.tip');

Open in new window


You have defined / set this in your mouse in and mouse out events but its not initialized inside your mousemove.

The whole code should look like this;
$(window).load(function(){
$(".tip_trigger").hover(function(){
		tip = $(this).parent().find('.tip').animate({opacity:"toggle"},200);//Show tooltip
	}, function() {
		tip = $(this).parent().find('.tip').animate({opacity:"toggle"},150);//Show tooltip
	}).mousemove(function(e) {
		var mousex = e.pageX + 20; //Get X coodrinates
		var mousey = e.pageY + 20; //Get Y coordinates
		var tip = $(this).parent().find('.tip');
		var tipWidth = tip.width(); //Find width of tooltip
		var tipHeight = tip.height(); //Find height of tooltip
		//Distance of element from the right edge of viewport
		var tipVisX = $(window).width() - (mousex + tipWidth);
		//Distance of element from the bottom of viewport
		var tipVisY = $(window).height() - (mousey + tipHeight);
		if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
			mousex = e.pageX - tipWidth - 20;
		} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
			mousey = e.pageY - tipHeight - 20;
		} 
		tip.css({  top: mousey, left: mousex });
	});
	});

Open in new window


HTH
Rainer
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Pierre CorneliusCommented:
.
0
splantonAuthor Commented:
Couldn't see the wood for the trees! Thank you for such a clean and concise answer - works a treat (stops a debug error too!) Nice to have a clean solution. :)
0
Pierre CorneliusCommented:
mouse in should be called before mousemove so theoretically tip would already have been defined.

Just out of curiosity, which browser are you using? I tested your code (per original question) under Firefox and it worked fine. I use Firebug and did not see any errors. So was just wondering...
0
splantonAuthor Commented:
I am using IE 10. It 'works' fine unless you have debug on, in which case you get the error. I wanted to get 100% clean as I have a client that checks these things. :)
0
Pierre CorneliusCommented:
Noted. Thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.