/**
* @description tooltip util | uses external png corner images, external css file, supports html, tested in ff/safari/opera/ie
* @version 1.0
* @author (c)2010 Julius Loa | jloa@chargedweb.com
* licence CC 3.0 @ http://creativecommons.org/licenses/by-sa/3.0/
*
* usage example:
*
*
*
* Roll me over
*
*/
var tooltip = {};
// relative images folder path
tooltip.iconsDir = "img/";
// whether to show the tooltip with a fade in effect (true = enabled)
tooltip.useFadeIn = true;
// whether to hide the tooltip with a fade out effect (true = enabled)
tooltip.useFadeOut = false;
// number of fade steps
tooltip.fadeSteps = 10;
// fade in duration in milliseconds
tooltip.fadeInDuration = 200;
// fade out duration in milliseconds
tooltip.fadeOutDuration = 50;
/**
* sort of private vars defined below, likely u won't need those
*/
tooltip.offsetX = 5;
tooltip.offsetY = 20;
tooltip.ns4 = document.layers;
tooltip.ns6 = document.getElementById && !document.all;
tooltip.ie4 = document.all;
tooltip.fadeInt = null;
tooltip.a = 0;
tooltip.t = null;
tooltip.tc = null;
tooltip.template = '';
/**
* Initializes the tool tip
*/
tooltip.init = function()
{
this.t = document.createElement("div");
this.t.setAttribute("id", "tooltip");
this.t.setAttribute("class", "tooltip");
this.t.innerHTML = this.template;
document.body.appendChild(this.t);
this.tc = document.getElementById("tooltipContent");
}
/**
* Shows the tooltip with the defined html text
* @param text html-text
*/
tooltip.show = function(text)
{
document.onmousemove = this.moveToMouse;
this.t.style.visibility = "visible";
this.t.style.zIndex = 101;
this.tc.innerHTML = text;
this.moveToMouse();
if(this.useFadeIn)
{
this.setAlpha(0);
this.fadeIn();
}else{
this.setAlpha(1);
}
}
/**
* Hides the tooltip
*/
tooltip.hide = function()
{
if(this.useFadeOut)
{
this.fadeOut();
}else{
this.hidePrivate();
}
}
/**
* @private hides the tooltip
*/
tooltip.hidePrivate = function()
{
document.onmousemove = null;
this.t.style.visibility = "hidden";
this.t.style.zIndex = -1;
}
/**
* @private moves the tooltip according to the mouse coordinates
*/
tooltip.moveToMouse = function(e)
{
x = 0; y = 0;
if(tooltip.ns4 || tooltip.ns6)
{
if(e)
{
x = e.pageX;
y = e.pageY;
}
} else {
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
tooltip.t.style.left = x + tooltip.offsetX + "px";
tooltip.t.style.top = y + tooltip.offsetY + "px";
return true;
}
/**
* @private sets the alpha for the div holder
*/
tooltip.setAlpha = function(value)
{
this.a = value;
this.t.style.opacity = value;
this.t.style.MozOpacity = value;
this.t.style.KhtmlOpacity = value;
this.t.style.filter = "alpha(opacity=" + (value * 100) + ");";
}
/**
* @private fade in effect
*/
tooltip.fadeIn = function()
{
clearInterval(this.fadeInt);
this.fadeInt = setInterval("tooltip.fadeInHandler()", (this.fadeInDuration/this.fadeSteps));
}
tooltip.fadeInHandler = function()
{
if(tooltip.a < 1)
{
tooltip.setAlpha(tooltip.a + (1/this.fadeSteps));
}else{
clearInterval(tooltip.fadeInt);
tooltip.setAlpha(1);
}
}
/**
* @private fade out effect
*/
tooltip.fadeOut = function()
{
clearInterval(this.fadeInt);
this.fadeInt = setInterval("tooltip.fadeOutHandler()", (this.fadeOutDuration/this.fadeSteps));
}
tooltip.fadeOutHandler = function()
{
if(tooltip.a > 0)
{
tooltip.setAlpha(tooltip.a - (1/this.fadeSteps));
}else{
clearInterval(tooltip.fadeInt);
tooltip.setAlpha(0);
tooltip.hidePrivate();
}
}
document.body.onLoad = tooltip.init();
