Free Javascripts - DHTML Mouseover Tooltip

DHTML Mouseover Tooltip

Written by Nelson
Friday, 03 February 2006
A simple and powerfull DHTML mouse over tooltip. Fully customizeble size and color in css style Supports cool drop down shawdow in IE Further customized text and backgroud color when add tool tip Tooltip can be added to link and other page elements Require FF1+ IE5+ Opr7+ Tooltip demo Demo 1: Link to free javascripts Demo 2: Freejavascriptkit.com provides simple and commonly used javascrits. It is a webmaster must have free resource! Has it ever accured to you that you can't find an easy to use javascript? If you tired of searching a free javascript with introductions and guids, you will need freejavascriptkit.com Introduction & Guide Step 1: Copy this css style code into your header tage right before the end of header tag <style type="text/css"> #dhtmltooltip{ position: absolute; border: 1px solid red; width: 150px; padding: 2px; background-color: lightyellow; visibility: hidden; z-index: 100; filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=115); } </style> Step 2 :Copy the following code into page with your body html tags <div id="dhtmltooltip"></div> <script type="text/javascript"> /*********************************************** * Freejavascriptkit.com * Visit http://www.freejavascriptkit.com for more free Javascripts source code **********************************************/ var offsetxpoint=-60 //Customize x offset of tooltip var offsetypoint=20 //Customize y offset of tooltip var ie=document.all var ns6=document.getElementById && !document.all var enabletip=false if (ie\|\|ns6) var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : "" function ietruebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function ddrivetip(thetext, thecolor, thewidth){ if (ns6\|\|ie){ if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px" if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor tipobj.innerHTML=thetext enabletip=true return false } } function positiontip(e){ if (enabletip){ var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft; var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop; //Find out how close the mouse is to the corner of the window var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20 var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20 var leftedge=(offsetxpoint<0)? offsetxpoint(-1) : -1000 //if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<tipobj.offsetWidth) //move the horizontal position of the menu to the left by it's width tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px" else if (curX<leftedge) tipobj.style.left="5px" else //position the horizontal position of the menu where the mouse is positioned tipobj.style.left=curX+offsetxpoint+"px" //same concept with the vertical position if (bottomedge<tipobj.offsetHeight) tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px" else tipobj.style.top=curY+offsetypoint+"px" tipobj.style.visibility="visible" } } function hideddrivetip(){ if (ns6\|\|ie){ enabletip=false tipobj.style.visibility="hidden" tipobj.style.left="-1000px" tipobj.style.backgroundColor='' tipobj.style.width='' } } document.onmousemove=positiontip </script> Step 3: Add the following code to your link or page element which needs a tool tip onMouseover="ddrivetip('Free javascripts from www.freejavascriptkit.com','lightgreen', 300)"; onMouseout="hideddrivetip()" This free javascript is provided by Free Javascripts
Last Updated ( Thursday, 22 June 2006 )

Tooltip demo

Introduction & Guide