popup tooltip
Written by 24 February 2014
A simple but useful code for showing tooltip by hovering mouse on specific link. Showing tooltip is floated at bottom of your page.
Code Snippet:
<!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<!-- this script got from www.htmlbestcodes.com-Coded by: Krishna Eydat -->
<html>
<head>
</head>
<body>
<script language="JavaScript" type="Text/JavaScript">
var fifteenth=new Array();fifteenth[1]='<b> Enjoy Making Scripts with htmlbestcodes.com! ';sixteenth=document.all||document.getElementById;seventeenth=document.layers;var eighteenth;var nineteenth;var twentieth;var first2;var second2;var third2;var fourth2=2;var fifth2;
function sixth2(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;}
function fifteenth3(sixteenth3,nineteenth3,inwidth,inheight) { twentieth=sixteenth3;
if(sixteenth){ eighteenth = "twelfth4"; nineteenth=document.getElementById? document.getElementById(eighteenth):document.all.eighteenth; first2=110;
if(sixteenth&&document.all) { second2=!window.opera? sixth2().clientHeight : document.body.clientHeight; third2=(sixth2().clientWidth-sixth2().leftMargin); }
if(sixteenth&&!document.all) { second2=window.innerHeight; third2=(window.innerWidth-(sixth2().offsetLeft+32)); }
if(nineteenth3=="override") { third2=inwidth; first2=inheight; } nineteenth.style.width=third2+"px"; nineteenth.style.height=fourth2+"px";
if(sixteenth&&document.all) { nineteenth.style.top=sixth2().scrollTop+second2+"px"; nineteenth.innerHTML = ""; nineteenth.insertAdjacentHTML("BeforeEnd","<table cellspacing=0 width="+third2+" height="+first2+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+twentieth+"</font></td></tr></table>"); }
if(sixteenth&&!document.all) { nineteenth.style.top=window.pageYOffset+second2+"px"; nineteenth.innerHTML = ""; nineteenth.innerHTML="<table cellspacing=0 width="+third2+" height="+first2+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+twentieth+"</font></td></tr></table>"; } }
if(seventeenth){ eighteenth = "second4"; nineteenth = eval("document."+eighteenth); second2=window.innerHeight; third2=window.innerWidth; first2=110;
if(nineteenth3=="override") { third2=inwidth; first2=inheight; } nineteenth.moveTo(0,eval(window.pageYOffset+second2)); nineteenth.width=third2; nineteenth.clip.width=third2; nineteenth.document.write("<table cellspacing=0 width="+third2+" height="+first2+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+twentieth+"</font></td></tr></table>"); nineteenth.document.close(); } twentieth3();}
function twentieth3() {
if(fourth2<=first2) {
if(sixteenth) { nineteenth.style.visibility="visible";
if(sixteenth&&document.all) { nineteenth.style.top=(sixth2().scrollTop+second2)-fourth2+"px"; }
if(sixteenth&&!document.all) { nineteenth.style.top=(window.pageYOffset+second2)-fourth2+"px"; } nineteenth.style.height=fourth2+"px"; fourth2+=2; fifth2=setTimeout("twentieth3()",11); }
if(seventeenth) { nineteenth.visibility = "visible"; nineteenth.moveTo(0,(eval(window.pageYOffset+second2)-fourth2)); nineteenth.height=fourth2; nineteenth.clip.height=(fourth2); fourth2+=2; fifth2=setTimeout("twentieth3()",9); } }
else{ clearTimeout(fifth2); }}
function first4() {
if(sixteenth) { nineteenth.innerHTML = ""; nineteenth.style.visibility="hidden"; fourth2=2; }
if(seventeenth) { nineteenth.document.write(""); nineteenth.document.close(); nineteenth.visibility="hidden"; nineteenth.width=0; nineteenth.height=0; nineteenth.clip.width=0; nineteenth.clip.height=0; fourth2=2; }}
if (sixteenth){document.write("<div id='twelfth4' style='background-color:red;visibility:hidden;position:absolute;left:0;width:0;height:0;z-index:1;overflow:hidden;border:0px ridge white'></div>");}
if (seventeenth){ third4 = eval("document.second4"); third4.visibility="hidden";}
</script>
<layer name="second4" bgcolor="red" style="border-width:thin;z-index:1"></layer>
<p>please hover on the below link!</p>
<br/><div style="clear:both"></div><div><a target="_blank" href="http://www.htmlbestcodes.com/" onmouseover="fifteenth3(fifteenth[1],'override',580,40)" onmouseout="clearTimeout(fifth2);first4()"><span style="font-size: 8pt; text-decoration: none">HTML Best Codes</span></a></div>
</body>
</html><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
sahjahan, fk khan, Proper, Jenisha, Mr Joseph Charles
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!