/*
Wayfarer Tooltip
Abel Mohler http://www.wayfarerweb.com

How it works:
1. Create an element on the page, with a unique ID.  Place some HTML inside of it. Styles set on this element will have no  bearing on the style of the tooltip, its HTML content is used to fill the tooltip.  Also, create an element that is rolled over to make the tooltip appear.  The example below is the <a> with and id of "trigger"

<div id="text-content">
<h6>Hello World!</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>



Call the function at the bottom of the page, preferably right before the closing </body> tag:

wTooltip("trigger", "text-content", true);

The first item is always the trigger, the second item is always the content that fills the tooltip.
There is also a third parameter, which should normally be set to true, if this is set to false, there will be no styles applied to the tooltip, which means that you must have extra elements within the "text-content" div, which have their own style rules.

The default styles are this:
{
	border: 1px solid gray;
	background: #EDEEF0;
	padding: 10px;
	z-index: 1000;
	top: 10px;
	left: 10px;
	max-width: 350px;
	text-align: left;
}

If you wish to override these styles, you must style the content that is inside the <div id="text-content">  Styles applied to #text-content itself WILL HAVE NO AFFECT, so if you wish to place styles on the content, you may only do it on what is INSIDE of the template container.  In other words, if you want to style a <div> to be a tooltip, you must nest it inside of the <div id="text-content">
*/
function wTooltip(trigger, content, styles) {
	document.getElementById(content).style.display="none";
	
	var oi=document.getElementById(trigger);        
	var text=document.getElementById(content).innerHTML;
	if(text.length>0)
	{
		var messageBox=document.createElement('div');
		messageBox.innerHTML=text;
		if(styles) {
			with(messageBox.style)
			{
				display="none";
				border="1px solid gray";
				background="#EDEEF0";
				padding="10px";
				position="absolute";
				zIndex="10";
				top="10px";
				left="10px";
				maxWidth="350px";
				textAlign="left";
			}
		} else {
			with(messageBox.style)
			{
				display="none";
				position="absolute";
			}
		}
		
		document.getElementsByTagName('body')[0].appendChild(messageBox);

		oi.onmouseover=function(ev)
		{
			var e=(ev)?ev:window.event;

			with(messageBox.style)
			{
				display="block";
				top=e.clientY+10+'px';
				left=e.clientX+10+'px';
			}
		}

		oi.onmouseout=function(ev)
		{
			var e=(ev)?ev:window.event;
			with(messageBox.style)
			{
				display="none";
				top=e.clientY+10+'px';
				left=e.clientX+10+'px';
			}
		}

		oi.onmousemove=function(ev)
		{
			var e=(ev)?ev:window.event;
			with(messageBox.style)
			{
				top=e.clientY+10+'px';
				left=e.clientX+10+'px';
			}
		}
	}
}