Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Show Custom JavaScript Tooltip

    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:

    Code:
    // 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.

    Code:
    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:

    Code:
    .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!

  • #2
    New Coder
    Join Date
    Oct 2009
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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:

    Code:
    	
    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?

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Firefox not firing 'onmouseover'

    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?

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    never mind. my soliution was not the problem
    Last edited by TinyScript; 11-03-2009 at 01:44 AM.

  • #5
    New Coder
    Join Date
    Oct 2009
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Okay for the next round I tried using addEventListener on non-IE browsers:

    Code:
    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!

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,032
    Thanks
    0
    Thanked 248 Times in 245 Posts
    Try this:
    Code:
    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.
    Code:
    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.
    Code:
    function controlPopUp( evt , x )
    	{
    		var e = window.event || evt;
    		var currTip = document.getElementById("tt-design" + x);
    		popUp( e , currTip.id );		
    	}

  • Users who have thanked glenngv for this post:

    marklavin (11-04-2009)

  • #7
    New Coder
    Join Date
    Oct 2009
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Working like a freaking charm!

    Do something nice for yourself today!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •