javascript.html

<script>


function focus(ttPosition,ttType,ttText,ttRect,divid,halfoffsetwidth) 
{
 if ( ttPosition == "bottom"|| ttPosition == "top"|| ttPosition == "left"|| ttPosition == "right" ) 
 {
 var toolTipPosition =ttPosition 
 var toolTipType =ttType 
 var tootTipText = ttText
 var rect = ttRect
 var divId = divid
 var halfOffsetWidth=halfoffsetwidth
 }
 
 try { var atr = this.getAttribute("data-tooltipposition")}
 catch(e) { var atr = null}
 
 if (atr)
 {
 this.style.backgroundColor = "rgba(0, 0, 0, .1)";
 var toolTipPosition = this.getAttribute("data-tooltipposition");
 var toolTipType = this.getAttribute("data-tooltiptype");
 var tootTipText = this.getAttribute("data-toolTipText");
 var rect = this.getBoundingClientRect();
 var divId = this.id+"tt";
 var halfOffsetWidth=this.offsetWidth/2;
 }
 // help for positioning
 //console.log(rect.top + " " + rect.right+ " " + rect.bottom+ " " + rect.left);
 
 
 // The lenght of our tooltip to put it in the middle of 
 // the div it is refering to. Create a dummy first
 var tempDiv = document.createElement('div');
 document.body.appendChild(tempDiv);
 tempDiv.style.fontSize = "10px"; // this should be the same as your style
 tempDiv.style.position = "absolute";
 tempDiv.style.left = -1000;
 tempDiv.style.top = -1000;
 tempDiv.innerHTML = tootTipText;
 var width= (tempDiv.clientWidth + 22) ; // add margins 
 var height= (tempDiv.clientHeight +12) ; // add margins
 document.body.removeChild(tempDiv);
 tempDiv = null;


 var div = document.createElement('div');
 div.id = divId
 div.style.position = "absolute";
 

 var className =""; 
 
 /* where to place the tooltip */
 if (toolTipPosition =="top")
 {
 className = className + "tooltip_top";
 var top = rect.top - height -(height/2)
 var left = rect.left + halfOffsetWidth*1 - (width / 2)
 div.style.top = top +"px";
 div.style.left = left +"px";
 }
 
 if (toolTipPosition =="left")
 {
 className = className + "tooltip_left";
 var top = rect.top - (height/2)
 var left = rect.left - width - (20)
 div.style.top = top +"px";
 div.style.left = left +"px";

 }
 
 if (toolTipPosition =="right")
 {
 className = className + "tooltip_right";
 var top = rect.top - (height/2)
 var left = rect.right + 6
 div.style.top = top +"px";
 div.style.left = left +"px";
 }
 
 if (toolTipPosition =="bottom")
 {
 className = className + "tooltip_bottom";
 var left = rect.left + halfOffsetWidth*1 - (width / 2)
 // dont need top the margin itselve will do.
 div.style.top = rect.bottom+"px";
 div.style.left = left +"px";
 }
 
 
 
 /* Assign the aspect the tooltip should have */
 /* don't remove the space in front of the class */
 if (toolTipType =="normal")
 {
 className = className + " tooltipnormal"; //black
 }
 
 
 if (toolTipType =="warning")
 {
 className = className + " tooltipwarning"; //red
 
 }
 
 
 if (toolTipType =="info")
 {
 className = className + " tooltipinfo"; //blue
 }
 
 div.className = className
 
 div.innerHTML = tootTipText; /* add the text to the tooltip */
 document.body.appendChild(div);
 

 
}


function noFocus() 
{
 this.style.backgroundColor = "transparent";
 document.getElementById(this.id+"tt").parentNode.removeChild(document.getElementById(this.id+"tt"))
}



function bindTooltip()
{
 var toolTipPosition =this.getAttribute("data-tooltipposition") 
 var toolTipType =this.getAttribute("data-tooltiptype") 
 var rect = this.getBoundingClientRect()
 var divid = this.id+"tt"
 var halfOffSetWith = this.offsetWidth/2

 google.script.run.withSuccessHandler(tooltipJS)
 .withFailureHandler(showError)
 .tooltipGS(toolTipPosition,toolTipType,rect,divid,halfOffSetWith);
}

function tooltipJS(toolTipArray)
{
 var toolTipPosition = toolTipArray[0]
 var toolTipType = toolTipArray[1]
 var tootTipText = toolTipArray[2]
 var rect = toolTipArray[3]
 var divid = toolTipArray[4]
 var halfoffsetwidth = toolTipArray[5]
 focus(toolTipPosition,toolTipType,tootTipText,rect,divid, halfoffsetwidth)
}

/* bind the elements mouseover event to the focus function */
document.getElementById("title").addEventListener('mouseover',focus,false);
document.getElementById("wtop").addEventListener('mouseover',focus,false);
document.getElementById("wleft").addEventListener('mouseover',focus,false);
document.getElementById("wright").addEventListener('mouseover',focus,false);
document.getElementById("wbottom").addEventListener('mouseover',focus,false);
document.getElementById("testgs").addEventListener('mouseover',bindTooltip,false);

/* bind the elements mouseout event to the focus function */
document.getElementById("title").addEventListener('mouseout',noFocus,false);
document.getElementById("wright").addEventListener('mouseout',noFocus,false);
document.getElementById("wtop").addEventListener('mouseout',noFocus,false);
document.getElementById("wleft").addEventListener('mouseout',noFocus,false);
document.getElementById("wbottom").addEventListener('mouseout',noFocus,false);
document.getElementById("testgs").addEventListener('mouseout',noFocus,false);

function showError(error) 
{
 console.log(error);
 window.alert('An error has occurred, please try again.');
}

</script>