asked on

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,

Alexandre Simões

What is "tip" and when and when is it defined?
Make sure the script file containing this object is defined before it's required.

splanton

ASKER

'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!

ASKER CERTIFIED SOLUTION

Rainer Jeschor

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Pierre Cornelius

splanton

ASKER

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. :)

Pierre Cornelius

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...

splanton

ASKER

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. :)

Pierre Cornelius

Noted. Thanks.