Show Custom JavaScript Tooltip

[marklavin]

I'm using custom javascript tooltips to show information about designs in a t-shirt shop, such as design name and artist. I downloaded the code and CSS for the tooltips and am attempting to assign the tooltip to each design using a javascript array and a for-in loop. Only problem is that the tooltips aren't showing at all, no matter what I do. I think the problem is related to the onmouseover event that I'm using, but the only thing that seems to work even partway is changing the visibility to "show" in the CSS. From that I can see that the text is being assigned to the tooltips properly and that they are being positioned within the window, but the onmouseover event is having no effect either way when I revert the visibility back to "hidden." Help!

Here is the code for the "toolTip.js" file:

// Extended Tooltip Javascript
// copyright 9th August 2002, 3rd July 2005, 24th August 2008
// by Stephen Chapman, Felgall Pty Ltd

// permission is granted to use this javascript provided that the below code is not altered

function pw() 
	{return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth}; 
	
function mouseX(evt) 
	{return evt.clientX ? evt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) : evt.pageX;} 

function mouseY(evt) 
	{return evt.clientY ? evt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) : evt.pageY} 
	
function popUp(evt,oi) 
	{if (document.getElementById) 
		{var wp = pw(); 
		dm = document.getElementById(oi); 
		ds = dm.style; 
		st = ds.visibility; 
		
		if (dm.offsetWidth) 
			ew = dm.offsetWidth; 
		
		else if (dm.clip.width) 
			ew = dm.clip.width; 
			
			if (st == "visible" || st == "show") 
				{ ds.visibility = "hidden"; } 
			
			else {
				tv = mouseY(evt) + 20; 
				lv = mouseX(evt) - (ew/4); 
				
				if (lv < 2) 
					lv = 2; 
				
				else if (lv + ew > wp) 
						lv -= ew/2; lv += 'px';tv += 'px';  
						ds.left = lv; 
						ds.top = tv; 
						ds.visibility = "visible";
				}
			}
		}

Here is the relevant code where I attempt to assign the event to the tooltip visibility change. Note the syntax in SetLinks() function, where the onclick behavior is set. This syntax is working perfectly here. I modelled the 'controlPopUp() syntax similarly, but no go.

window.onload = function() 
	{
		creationCompleteHandler();
	}

function creationCompleteHandler()
	{
		calcNumDesigns();
		setLinks();
		controlToolTip();
	}

function calcNumDesigns()
	{
		var numDesignBoxes = designImages.length;
		var numGalleryRows = Math.ceil( numDesignBoxes / 3 );
		
		for ( n = 0 ; n <= numGalleryRows - 1 ; n++ )
			{
				var newGalleryBox = document.createElement('div');
				var newGalleryBoxID = ("galleryRow" + n);
				newGalleryBox.setAttribute('id',newGalleryBoxID);
				newGalleryBox.setAttribute('class',"galleryBox");
				document.getElementById('content').appendChild(newGalleryBox);
				
				squareOff(newGalleryBox);
				
				var rowBoxes;
				if  ( ( numDesignBoxes - ( n * 3 ) ) < 3 ) { rowBoxes = ( numDesignBoxes - ( n * 3 ) - 1 ) }
				else rowBoxes = 2;
				
				for ( m = 0 ; m <= rowBoxes ; m++ )
					{
						var boxNum = ( n * 3 ) + m;
						var newDesignBox = document.createElement('div');

						var newDesignBoxID = "design" + boxNum;
						newGalleryBox.appendChild(newDesignBox);
						newDesignBox.setAttribute('id',newDesignBoxID);
						newDesignBox.setAttribute('class',"designBox");

						var newDesignImg = document.createElement('img');
						var newDesignImgID = "designImg" + boxNum;
						newDesignImg.setAttribute('id',newDesignImgID);
						newDesignImg.setAttribute('class',"designImage");
						newDesignImg.src = designImages[boxNum][0]; 
						
						newDesignBox.appendChild(newDesignImg);
						
						var newDesignTip = document.createElement('div');
						var newDesignTipID = "tt-design" + boxNum;
						newDesignTip.setAttribute('class',"tip");
						newDesignTip.textContent = designImages[boxNum][2] + " Artist: " + designImages[boxNum][3];
						newDesignTip.innerText = designImages[boxNum][2] + " Artist: " + designImages[boxNum][3];
						
						newDesignBox.appendChild(newDesignTip);
					}
			}
	}
	
function squareOff(frame)
	{
		document.getElementById(frame.id).style.height = ((document.getElementById(frame.id).offsetWidth) * .33) + 'px';
	}
	
function setLinks()
	{
		for (var x in designImages)
			{ 
				document.getElementById("design"+x).onclick = new Function( "sendToURL(" + x + ")" );
			}
	}
	
function sendToURL(x)
	{
		var url = designImages[x][1]
		MM_goToURL('self',url);
		return document.MM_returnValue;
	}
	
function MM_goToURL() 
	{ //v3.0
 		 var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
 		 for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
	}

function controlToolTip()
	{
		for (var x in designImages)
			{ 
				var currTip = "tt-design" + x;
				document.getElementById( "design" + x ).onmouseover = "controlPopUp( event , " + x + ")";
			}
	}
	
function controlPopUp( evt , x )
	{
		var e = evt;
		var currTip = "tt-design" + x;
		popUp( e , currTip );
	}

Here is the CSS:

.tip {
	font:10px/12px Arial,Helvetica,sans-serif; 
	border:solid 1px #666666; 
	width:270px; 
	padding:1px;
	position:absolute; 
	z-index:100; 
	visibility:hidden;
	color:#333333; 
	top:20px;
	left:90px; 
	background-color:#ffffcc;
	layer-background-color:#ffffcc;
}

Thanks in advance for your help!

[marklavin]

I've now got the custom tooltips showing correctly in all the browsers except Firefox. Not sure what the issue is here, but here's the modification to the JS code on the main page:

	
function controlToolTip()
	{
		for (var x in designImages)
			{ 
				document.getElementById("design"+x).onmouseover = new Function( "controlPopUp( event , " + x + ")" );
				document.getElementById("design"+x).onmouseout = new Function( "controlPopUp( event , " + x + ")" );
			}	
	}
	
function controlPopUp( evt , x )
	{
		var e = evt;
		var currTip = document.getElementById("tt-design" + x);
		popUp( e , currTip.id );		
	}

Anyone have any ideas why Firefox wouldn't be showing the tips?

[marklavin]

Okay, after playing with alerts, I've figured out that the issue is Firefox not firing the 'onmouseover' event, so the controlPopUp function is never executed. All the other browsers (Chrome, Safari, IE) do this fine. What gives?

[TinyScript]

never mind. my soliution was not the problem

[marklavin]

Okay for the next round I tried using addEventListener on non-IE browsers:

function controlToolTip()
	{
		for (var x in designImages)
			{ 
				if (window.addEventListener) 
					{
						document.getElementById("design"+x).addEventListener('mouseover' , new Function( "controlPopUp( event , " + x + ")" ), false);
						document.getElementById("design"+x).addEventListener('mouseout' , new Function("controlPopUp( event , " + x + ")" ), false);						
					}
				else {
						document.getElementById("design"+x).onmouseover = new Function( "controlPopUp( event , " + x + ")" );
						document.getElementById("design"+x).onmouseout = new Function( "controlPopUp( event , " + x + ")" );
					}
			}	
	}

Works fine in Chrome and Safari and IE. Still no love from Firefox... anyone out there have any suggestions? Even Google searching is coming up short on this one. Lots of people having similar issues, but most of the time dealing with issues that can be handled via CSS. I don't think CSS has the scope to handle this.... Help!

[glenngv]

Try this:

document.getElementById("design"+x).onmouseover = new Function("evt", "controlPopUp(evt , " + x + ")" );

FF passes the event object to the event handler as the first argument. To use function arguments to the Function constructor, you need to use the syntax below.

new Function([arg1[, arg2[, ... argN]],] functionBody)

You also need to change controlPopup method for it to work in IE if you use the above solution.

function controlPopUp( evt , x )
	{
		var e = window.event || evt;
		var currTip = document.getElementById("tt-design" + x);
		popUp( e , currTip.id );		
	}

[marklavin]

Working like a freaking charm!

Do something nice for yourself today!