// Extended Tooltip Javascript
// copyright 9th August 2002, 3rd July 2005
// by Stephen Chapman, Felgall Pty Ltd

// permission is granted to use this javascript provided that the below code is not altered
var DH = 0;
var an = 0;
var al = 0;
var ai = 0;
if (document.getElementById) {ai = 1; DH = 1;}
else {
    if (document.all) {al = 1; DH = 1;}
    else {
        browserVersion = parseInt(navigator.appVersion);
        if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {an = 1; DH = 1;}
    }
}
function find_element(element, withStyle) {
    if (ai) return withStyle ? document.getElementById(element).style:document.getElementById(element);
    if (al) return withStyle ? document.all[element].style: document.allelement;
    if (an) return document.layers[element];
}
function window_width() {
    return window.innerWidth != null? window.innerWidth: document.body.clientWidth != null? document.body.clientWidth:null;
}
function mouseX(evt) {
    if (evt.pageX) return evt.pageX;
    else if (evt.clientX) return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft);
    else return null;
}
function mouseY(evt) {
    if (evt.pageY) return evt.pageY;
    else if (evt.clientY) return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    else return null;
}
function csTooltip(evt, oi, $that) {
    if (DH) {
        var wp = window_width();
        dom_element_style = find_element(oi,1);
        dom_element = find_element(oi,0);
        current_visibility = dom_element_style.visibility;
        if (dom_element.offsetWidth) element_width = dom_element.offsetWidth;
        else if (dom_element.clip.width) element_width = dom_elementclip.width;
        if (current_visibility == "visible" || current_visibility == "show") { dom_element_style.visibility = "hidden"; }
        else {
            //alert($that.nodeName);
            tv = (mouseY(evt) - getOffsetTop($that) + ($that.offsetTop + $that.offsetHeight)) + 20;
            lv = (mouseX(evt) - getOffsetLeft($that)) -(element_width/4) + $that.offsetLeft;
            
            if (lv < 2) lv = 2;
            else if (lv + element_width > wp) lv -= element_width/2;
            if (!an) {lv += 'px';tv += 'px';}
            dom_element_style.left = lv;
            dom_element_style.top = tv;
            dom_element_style.visibility = "visible";
        }
    }
}


function getOffsetLeft(element) {
    if (element.offsetParent) {
        //alert(element.offsetLeft+getOffsetLeft(element.offsetParent) + "Recursing...");
        return element.offsetLeft+getOffsetLeft(element.offsetParent);
    }
    else if (element.offsetLeft) {
        //alert(element.offsetLeft + "Returning...");
        return element.offsetLeft;
    }
    else {
        //alert("Returning 0...");
        return 0;
    }
}

function getOffsetTop(element) {
    if (element.offsetParent) return element.offsetTop+getOffsetTop(element.offsetParent);
    else if (element.getOffsetTop) return element.OffsetTop;
    else return 0;
}
/*
.tip {
    font:10px/12px Arial,Helvetica,sans-serif;
    border:solid 3px #660000;
    width:270px;
    padding:1px;
    position:absolute;
    z-index:100;
    visibility:hidden;
    color:#333333;
    top:20px;
    left:90px;
    background-color:#FFFFFF;
    layer-background-color:#FFFFFF;
}


<div id="t1" class="tip">This is a Javascript Tooltip</div>

 <a href="#" onmouseout="csTooltip(event,'t1')" onmouseover="csTooltip(event,'t1')"  onclick="return false">  

*/