Shadow tooltip
Written by 24 February 2014
a floated tooltip showing by hovering mouse on the link. Simple but very useful.
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>
<style type="text/css">
#fifteenth{position: absolute;width: 150px;border: 2px solid black;padding: 2px;background-color: #CCFFFF;visibility: hidden;z-index: 99;filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);}
</style>
</head>
<body>
<div id="fifteenth"></div>
<script type="text/javascript">
var sixteenth=-62; var seventeenth=21; var eighteenth=document.all;var nineteenth=document.getElementById && !document.all;var twentieth=false;
if (eighteenth||nineteenth)var first2=document.all? document.all["fifteenth"] : document.getElementById? document.getElementById("fifteenth") : "";
function second2(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;}
function third2(fourth2, fifth2, sixth2){
if (nineteenth||eighteenth){
if (typeof sixth2!="undefined") first2.style.width=sixth2+"px";
if (typeof fifth2!="undefined" && fifth2!="") first2.style.backgroundColor=fifth2;first2.innerHTML=fourth2;twentieth=true;return false;}}
function fifteenth3(e){
if (twentieth){var sixteenth3=(nineteenth)?e.pageX : event.x+second2().scrollLeft;var seventeenth3=(nineteenth)?e.pageY : event.y+second2().scrollTop;var eighteenth3=eighteenth&&!window.opera? second2().clientWidth-event.clientX-sixteenth : window.innerWidth-e.clientX-sixteenth-20;var nineteenth3=eighteenth&&!window.opera? second2().clientHeight-event.clientY-seventeenth : window.innerHeight-e.clientY-seventeenth-20;var twentieth3=(sixteenth<0)? sixteenth*(-1) : -960;
if (eighteenth3<first2.offsetWidth)first2.style.left=eighteenth? second2().scrollLeft+event.clientX-first2.offsetWidth+"px" : window.pageXOffset+e.clientX-first2.offsetWidth+"px";
else if (sixteenth3<twentieth3)first2.style.left="5px";else first2.style.left=sixteenth3+sixteenth+"px";
if (nineteenth3<first2.offsetHeight)first2.style.top=eighteenth? second2().scrollTop+event.clientY-first2.offsetHeight-seventeenth+"px" : window.pageYOffset+e.clientY-first2.offsetHeight-seventeenth+"px";else first2.style.top=seventeenth3+seventeenth+"px";first2.style.visibility="visible";}}
function first4(){
if (nineteenth||eighteenth){twentieth=false;first2.style.visibility="hidden";first2.style.left="-1000px";first2.style.backgroundColor='';first2.style.width='';}}document.onmousemove=fifteenth3;
</script>
<p>Hover your mouse on the below link!</p>
<div style="clear:both"></div><div><a target="_blank" href="http://www.htmlbestcodes.com/" onMouseover="third2(' Enjoy Making Scripts with htmlbestcodes.com! ', 'red', 244)"; onMouseout="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!