How to create Ballon Tooltip

var horizontal_offset = "9px" //horizontal offset of hint box from anchor link

/////No further editting needed

var vertical_offset = "0" //horizontal offset of hint box from anchor link. No need to change.
var ie = document.all
var ns6 = document.getElementById && !document.all

function getposOffset(what, offsettype) {
    var totaloffset = (offsettype == "left") ? what.offsetLeft : what.offsetTop;
    var parentEl = what.offsetParent;
    while (parentEl != null) {
        totaloffset = (offsettype == "left") ? totaloffset + parentEl.offsetLeft : totaloffset + parentEl.offsetTop;
        parentEl = parentEl.offsetParent;
    }
    return totaloffset;
}

function iecompattest() {
    return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge) {
    var edgeoffset = (whichedge == "rightedge") ? parseInt(horizontal_offset) * -1 : parseInt(vertical_offset) * -1
    if (whichedge == "rightedge") {
        var windowedge = ie && !window.opera ? iecompattest().scrollLeft + iecompattest().clientWidth - 30 : window.pageXOffset + window.innerWidth - 40
        dropmenuobj.contentmeasure = dropmenuobj.offsetWidth
        if (windowedge - dropmenuobj.x < dropmenuobj.contentmeasure)
            edgeoffset = dropmenuobj.contentmeasure + obj.offsetWidth + parseInt(horizontal_offset)
        
    }
    else {
        var windowedge = ie && !window.opera ? iecompattest().scrollTop + iecompattest().clientHeight - 15 : window.pageYOffset + window.innerHeight - 18
        dropmenuobj.contentmeasure = dropmenuobj.offsetHeight
        if (windowedge - dropmenuobj.y < dropmenuobj.contentmeasure)
            edgeoffset = dropmenuobj.contentmeasure - obj.offsetHeight
    }
    return edgeoffset
}

function showhint(menucontents, obj, e, tipwidth, ttPos)
 {
    if ((ie || ns6) && document.getElementById("hintbox"))
     {
        dropmenuobj = document.getElementById("hintbox")
        dropmenuobj.innerHTML = menucontents
        dropmenuobj.style.left = dropmenuobj.style.top = -500
        if (tipwidth != "")
        {
            dropmenuobj.widthobj = dropmenuobj.style
            dropmenuobj.widthobj.width=tipwidth
//            if (menucontents.length < 35)
//            {
//                dropmenuobj.widthobj.width = menucontents.length
//            }
        }
        dropmenuobj.x = getposOffset(obj, "left")
        dropmenuobj.y = getposOffset(obj, "top")
        //alert(dropmenuobj.x);
        //alert(obj.offsetWidth);

        if (ttPos == "left" && obj.offsetWidth <= 60)
        {
            //alert(obj.offsetWidth);
            dropmenuobj.style.left = dropmenuobj.x - clearbrowseredge(obj, "rightedge") - obj.offsetWidth - 175 + "px"
        }
        else if (ttPos == "left" && obj.offsetWidth > 60)
        {
            //alert(obj.offsetWidth);
            dropmenuobj.style.left = dropmenuobj.x - clearbrowseredge(obj, "rightedge") - obj.offsetWidth - 90 + "px"
        }
        else 
        {
            //alert('test');
            dropmenuobj.style.left = dropmenuobj.x - clearbrowseredge(obj, "rightedge") + obj.offsetWidth + "px"
        }


        //dropmenuobj.style.left = dropmenuobj.x - clearbrowseredge(obj, "rightedge") + obj.offsetWidth + "px"

        dropmenuobj.style.top = dropmenuobj.y - clearbrowseredge(obj, "bottomedge") + "px"
        dropmenuobj.style.visibility = "visible"
        obj.onmouseout = hidetip
        obj.onblur = hidetip
    }
}

function hidetip(e) {
    dropmenuobj.style.visibility = "hidden"
    //dropmenuobj.style.left = "-500px"
}

function createhintbox() {
    var divblock = document.createElement("div")
    divblock.setAttribute("id", "hintbox")
    document.body.appendChild(divblock)
}

if (window.addEventListener)
    window.addEventListener("load", createhintbox, false)
else if (window.attachEvent)
    window.attachEvent("onload", createhintbox)
else if (document.getElementById)
    window.onload = createhintbox

#hintbox{ /*CSS for pop up hint box */
position:absolute;
top: 0;
background-color:#F4F4F4;
/*width: 150px;*/ /*Default width of hint.*/
padding: 3px;
border:.5px solid #FF6D0D;
font:normal 11px ;
font-size:small;
font-family:Calibri;
line-height:15px;
color:#242B7B;
z-index:100;
border-right: 2.5px solid #FF6D0D;
border-bottom: 2.5px solid #FF6D0D;
/*line-height:20px;*/
-moz-border-radius:5px;
visibility: hidden;
}