Demo
Rollover me
Relevant code used in this demo
// Static property, obtains a high zindex for the tooltip
TooltipManager.zindex = 10100;
// Class TooltipManager
function TooltipManager(txt,style){
this.txt = txt;
this.tooltipClass = style;
this.tooltipObj;
this.init();
}
TooltipManager.prototype.init = function(){
this.onmouseover = this.show;
this.onmouseout = this.hide;
}
TooltipManager.prototype._createChild = function(){
var tooltip = document.createElement("div");
with(tooltip){
className = this.tooltipClass;
style.position = "absolute";
style.zIndex = TooltipManager.zindex++;
appendChild(document.createTextNode(this.txt));
}
this.tooltipObj = tooltip;
}
TooltipManager.prototype.show = function(e){
if(this.tooltipObj==null)this._createChild();;
document.body.appendChild(this.tooltipObj);
this.onmousemove = this.follow;
this.follow(e?e:event);
}
TooltipManager.prototype.hide = function(){
if(this.tooltipObj){
this.onmousemove = null;
document.body.removeChild(this.tooltipObj);
}
}
TooltipManager.prototype.follow = function(e){
if(!e)e=event;
var x = e.clientX;
var y = e.clientY-this.tooltipObj.offsetHeight-5;
if(this.tooltipObj){
this.tooltipObj.style.top = y+"px";
this.tooltipObj.style.left = x+"px";
}
}
// Page code
// The tooltip manager takes 2 args: The text on the tooltip, and the css class to be applied
Object.registerClass("#zona",TooltipManager,["Here is a box","tooltip"]);
< back