tooltip fix?

**KB1** · 03-06-2007, 08:39 PM

Hello

Tried to apply the js code for tool tip http://www.dynamicdrive.com/dynamici...agetooltip.htm

but cannot get this to work

http://www.enhancedwireless.net/Company/who.shtml

Rollover any links in the text and nothing happens - how to fix?

Newbie , so more specific the better...thanks much
KB

**jscheuer1** · 03-06-2007, 09:50 PM

That's an onload conflict, add this to your body's onload event:

Code:

<body onload="initTip();MM_preloadImages('../images/index_r8_c3_f2.jpg','../images/index_r8_c6_f2.jpg','../images/index_r8_c9_f2.jpg','../images/index_r8_c11_f2.jpg','../images/index_r8_c15_f2.jpg')">

**KB1** · 03-06-2007, 10:06 PM

Excellent help - thank you very much! If you have a look now at that web page, that fix worked to reveal, but now still need help in customizing - I've got 7 popup images on this page - 6 are the same dimensions, 1 is bigger - so how do I alter these individually? I'm still playing around with understanding positioning...not quite there yet. Newbie to this code biz. How do I get rid of that "undefined" text as well?

KB

http://www.enhancedwireless.net/Company/whoJS.shtml

**jscheuer1** · 03-07-2007, 04:21 AM

OK, first off there is an error in IE 7. I'm not sure why and it isn't happening on the demo page but, none of the obvious candidates (DOCTYPE, other scripts, the 'undefined' thing, and the previous change we made) are the cause. So, here is a fix - find this part in the code:

Code:

var mouseX, mouseY;
function trackMouse(evt) {
	standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
	mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
	mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
	if (tipOn) positionTip(evt);
}

Make it like so:

Code:

var mouseX, mouseY, standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body;
function trackMouse(evt) {
	standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
	mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
	mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
	if (tipOn) positionTip(evt);
}

Now, about 'undefined'. If you are using pictures only (no text with them in the tip), you still need an empty string in the arrays to represent 'no text', like so:

Code:

messages[0] = new Array('../images/ODMA4popup.gif', '');
messages[1] = new Array('../images/Patents4popup.jpg', '');
messages[2] = new Array('../images/HQ4popup.jpg', '');
messages[3] = new Array('../images/TW4popup.jpg', '');
messages[4] = new Array('../images/UK4popup.jpg', '');
messages[5] = new Array('../images/MAL4popup.jpg', '');
messages[6] = new Array('../images/WN4popup.jpg', '');

About customizing the widths of each individual tip. Once you start doing it for one, it must be done for all. Here is an example:

Code:

<a href="../Technology/basics.shtml" onmouseover="tipcss.width='375px';doTooltip(event,0)" onmouseout="hideTip()">ODMA</a>

One last thing, I think that you would be better off with the default settings here:

Code:

var offX= 0;	// how far from mouse to show tip
var offY= -15;

That would be:

Code:

var offX= 20;	// how far from mouse to show tip
var offY= 12;

**KB1** · 03-07-2007, 05:05 AM

Well thanks greatly again - very detailed and helpful!

I'll have to try this out Wed when I'm back at work - will let you know how it turns out...thanks very much

KB

**KB1** · 03-07-2007, 06:16 PM

OK John

Almost there -

http://www.enhancedwireless.net/Company/whoJS.shtml

you'll see there appears to be 2 boxes for each pic, and the first box is not big enough, while the others are too big? Maybe one more tweak and we'll have it, but what tweak?

Thanks much

KB

**jscheuer1** · 03-07-2007, 06:36 PM

The widths that you are specifying aren't wide enough. They must be wider than the images to accommodate the styling of the tip.

**KB1** · 03-07-2007, 06:46 PM

Just made the widths larger - the first tip window is a bit too large and the other ones don't work either - tried playing with these but doing something wrong - also, don't I have to set each height as well?

KB

**jscheuer1** · 03-07-2007, 06:52 PM

I also just noticed that, if you set the:

Code:

///////////////////////  CUSTOMIZE HERE   ////////////////////
// settings for tooltip 
// Do you want tip to move when mouse moves over link?
var tipFollowMouse= false;	
// Be sure to set tipWidth wide enough for widest image
var tipWidth= 10;
var offX= 12;	// how far from mouse to show tip
var offY= 20; 
var tipFontFamily= "Arial, Helvetica, sans-serif";
var tipFontSize= "10pt";
// set default text colo . . .

narrow, when it makes up the base tip, it will expand later but, if you have it at 302 (like you do) then each tip will want to be that wide at least.

Thread: tooltip fix?

Thread Tools

Search Thread

tooltip fix?

Bookmarks

Bookmarks

Posting Permissions