Code2Design | Coding and Designing the Best!

User login

The Layout

Programming

Graphic Design

Resources

Navigation

C2D Projects

Unsystematic Affiliates

Change Language

Javascript tooltips

Easy tooltips using javascript and html

Today I'm gone teach you how to create tooltips in HTML. First of all, you need to let the computer know that we are writing javascript - So start by typing:

<script language="javascript">

</script>;

Now that we have the container for the javascript we can now add the actual code for the tooltips. Paste this inside the script tags:

var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
offsetX = 05;
offsetY = 20;
var toolTipSTYLE = "";
function initToolTips() {
	var ttarea = document.createElement('div');
	ttarea.setAttribute('id','toolTipLayer');
	ttarea.style.position = "absolute";
	ttarea.style.width = "250px";
	if(document.appendChild){
		document.body.appendChild(ttarea);
	} else {
		alert("Your browser does not support the script used at this page, pleas switch browser");	
	}
	if(ns4||ns6||ie4) {
		if(ns4) {
			toolTipSTYLE = document.toolTipLayer;
		} else if(ns6) {
			toolTipSTYLE = document.getElementById("toolTipLayer").style;
		} else if(ie4) {
			toolTipSTYLE = document.all.toolTipLayer.style;
		}
		if(ns4) {
			document.captureEvents(Event.MOUSEMOVE);
		} else {
			toolTipSTYLE.visibility = "visible";
			toolTipSTYLE.display = "none";
		}
		document.onmousemove = moveToMouseLoc;
	}
}
function toolTip(msg, fg, bg, border)
{
	if(toolTip.arguments.length < 1) {
		if(ns4) {
			toolTipSTYLE.visibility = "hidden";
		} else {
			toolTipSTYLE.display = "none";
		}
	} else {
		if(!fg) {
			fg = "#777777";
		}
		if(!bg) {
			bg = "#FFFFFF";
		}
		if(!border){
			border = fg;	
		}
		var content = '<table border="0" cellspacing="0" cellpadding="1" bgcolor="';
		content += border;
		content += '"><td>';
		content += '<table border="0" cellspacing="0" cellpadding="1" bgcolor="';
		content += bg;
		content += '"><td align="center"><font face="sans-serif" color="';
		content += fg;
		content += '" size="-2">&nbsp\;';
		content += msg;
		content += '&nbsp\;</font></td></table></td></table>';
		if(ns4) {
			toolTipSTYLE.document.write(content);
			toolTipSTYLE.document.close();
			toolTipSTYLE.visibility = "visible";
		}
		if(ns6) {
			document.getElementById("toolTipLayer").innerHTML = content;
			toolTipSTYLE.display = 'block';
		}
		if(ie4) {
			document.all("toolTipLayer").innerHTML=content;
			toolTipSTYLE.display='block';
		}
	}
}
function moveToMouseLoc(e) {
	if(ns4||ns6) {
		x = e.pageX;
		y = e.pageY;
	} else {
		x = event.x + document.body.scrollLeft;
		y = event.y + document.body.scrollTop;
	}
	toolTipSTYLE.left = x + offsetX;
	toolTipSTYLE.top = y + offsetY;
	return true;
}
function setToolTip(object, msg, fg, bg, border){
	if(setToolTip.arguments.length < 2) {
		return false;
	} else {
		switch (setToolTip.arguments.length) {
			case 2:
				object.onmouseover = function(){
					toolTip(msg);	
				}
				break;
			case 3:
				object.onmouseover = function(){
					toolTip(msg, fg);	
				}
				break;
			case 4:
				object.onmouseover = function(){
					toolTip(msg, fg, bg);	
				}
				break;
			case 5:
				object.onmouseover = function(){
					toolTip(msg, fg, bg, border);	
				}
				break;
			default:
				object.onmouseover = function(){
					toolTip(msg, fg, bg);	
				}
				break;
		}
		object.onmouseout = function(){
			toolTip();	
		}
	}
}
initToolTips();

Don't bother trying to understand everything that happens, even I don't... But what is importent now is that to create a tooltip to a spessific object you can use one out of two methods... The first one is to add this attributes to a already existing html-tag:

onmouseover="tooltip('text','#forgroundcollor','#backgroundcolor','#bordercolor');" onmouseout="tooltip();"

Now of couse this won't work because #forgrondcollor isn't a valid collor, you need to use valid collors for every field that starts with an '#'. Aditionaly you only need to add one parameter, then the code looks like this:

onmouseover="tooltip('text');" onmouseout="tooltip();"

The second method is to add id to every element that you wan't to create a tooltip belonging to and then at the very bottom of the page (just before the closing <body> tag you can add this script:

<script language="javascript">
    setToolTip(document.getElementById("theId"), "text");
</script>

And that's it, you're done!

Submitted by Alxandr on June 2, 2007 - 5:51pm.
read more | add new comment

Reply

Like what you see?

Why not add more? C2D is looking for other Christian Web Masters who would like to help write articles for this site. If you have expericance in FLASH, CSS/HTML, PHP/MySQL, PhotoShop/GIMP, Blender, Javascript, or just General Design - our users would love to hear what you have to say. Contact Us