Full version: jsB@nk » Form » Textarea » Tooltip for input
URL: https://www.javascriptbank.com/tooltip-for-input.html
This script detects the mouse position and waits for mouseover the inputs. Then it will show up a layer/div called 'Display' 95 pixels right to the cursor and write the appropriate help info text on this 'Display'. And as the mouse is out of the 'Display', the 'Display' would diappear....
Full version: jsB@nk » Form » Textarea » Tooltip for input
URL: https://www.javascriptbank.com/tooltip-for-input.html
<SCRIPT>//detecting browser to dynamically write appropriate DIVs/LAYERsN=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)<5)S=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)>4.9)M=(navigator.appName.indexOf('Microsoft')!=-1)Vis=new Array()Vis[0]=(M||S) ? "hidden" : "hide"Vis[1]=(M||S) ? "visible" : "show"function GetDiv(divId,divY,divX,divW,divH,bCol,visb,zInd){bkCol=(bCol!="")?((N)?" bgColor="+bCol:";background:"+bCol):""Styl = (M||S) ? "<DIV" : "<LAYER"if(M||S){Styl+=" ID="+divIdStyl+=" style='position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkColStyl+=";visibility:"+Vis[visb]+";z-index:"+zIndStyl+="'>"}if(N){Styl+=" ID="+divIdStyl+=" top="+divY+" left="+divX+" width="+divW+" height="+divH+bkColStyl+=" visibility="+Vis[visb]+" z-index="+zIndStyl+=">"}document.writeln(Styl)}function EndDiv(){(M||S)? document.writeln("</DIV>"): document.writeln("</LAYER>")}function PutIt(ID,dX,dY){if(N){document.layers[ID].left=dXdocument.layers[ID].top=dY}if(M){document.all[ID].style.left=dXdocument.all[ID].style.top=dY}if(S){document.getElementById(ID).style.left=dXdocument.getElementById(ID).style.top=dY}}function ShowHide(ID,vs){if(N){document.layers[ID].visibility=Vis[vs]}if(M){document.all[ID].style.visibility=Vis[vs]}if(S){document.getElementById(ID).style.visibility=Vis[vs]}}function Xof(ID){if(N){return document.layers[ID].left}if(M){return document.all[ID].style.left}if(S){return document.getElementById(ID).style.left}}function Yof(ID){if(N){return document.layers[ID].top}if(M){return document.all[ID].style.top}if(S){return document.getElementById(ID).style.top}}function Zind(ID,zz){if(N){document.layers[ID].zIndex=zz}if(M){document.all[ID].style.zIndex=zz}if(S){document.getElementById(ID).style.zIndex=zz}}function ChangeCol(ID,colrx){if(M)document.all[ID].style.background=colrxif(N)document.layers[ID].bgColor=colrxif(S)document.getElementById(ID).style.background=colrx}function DivWrite(IdName,Str) {if (N){document.layers[IdName].document.write(Str)document.layers[IdName].document.close()}if(M) document.all[IdName].innerHTML=Strif(S) document.getElementById(IdName).innerHTML=Str}</SCRIPT><SCRIPT language=javascript>if(N){alert("Netscape4.x does not support inline style\nand won't handle mouse events for form elements.\nIt SUX! and I hate it!");self.close()}Content=new Array("","Please write your name here.<br> No mubers, please.","Your date of birth, in format DD-MM-YYYY","Please type in your email here. <br>(Optional)")document.onmousemove=newPos; function newPos(e){if(M){X=event.clientXY=event.clientY}if(S){X=e.pageXY=e.pageY}}Yc=0Xc=0GetDiv("Display",0,0,200,50,"skyblue",0,0)document.write("Display")EndDiv() function GetDisplay(i){Yc=YXc=XPutIt('Display',Xc-25,Yc+15)ShowHide('Display',1)lyrWrt("Display",Content[i])}function BlurDisplay(){ShowHide('Display',0)}function lyrWrt(IdName,Str) { if(M) document.all[IdName].innerHTML=Str if(S) document.getElementById(IdName).innerHTML=Str}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><FORM><TABLE cellPadding=20 width=450> <TBODY> <TR> <TD>Name:<BR> <INPUT onmouseover="Ovr=setTimeout('GetDisplay(1)',500)" onfocus=BlurDisplay() onmouseout=clearTimeout(Ovr);BlurDisplay() size="20"> <TD align=right rowSpan=3><FONT size=4>This script detects the mouse position and waits for mouseover the inputs. Then it will show up a layer/div called "Display" 95 pixels right to the cursor and write the appropriate help info text on this "Display". And as the mouse is out of the "Display", the "Display" would diappear... <HR> <FONT size=1>(Note: This last effect uses "onmouseout" on the images) </FONT></FONT> <TR> <TD>DOB:<BR> <INPUT onmouseover=GetDisplay(2) onfocus=BlurDisplay() onmouseout=BlurDisplay() size="20"> <TR> <TD>Email:<BR> <INPUT onmouseover=GetDisplay(3) onfocus=BlurDisplay() onmouseout=BlurDisplay() size="20"> </TR></TBODY></TABLE></FORM><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->