Dynamic Drive DHTML Scripts- Cool DHTML Tooltip

New Revised CSS Library Forums Web Tools

Cool DHTML Tooltip

Author: Dynamic Drive

Description: This is a practical, elegant DHTML tooltip script. Use it to display additional information about a link or any other element when the mouse moves over it. A customizable tooltip pops up, which works in all modern DHTML browsers- IE4+, NS6+, and Opera 7+. Three interesting features of this script are:

Unlike a regular tooltip (ie: one created using the "title" attribute), Cool DHTML Tooltip continues to display itself and follow the mouse around while the mouse is anywhere over the link/HTML element.
Fully customizable tooltip style via CSS, including an optional shadow (IE5.5+ only). You can further modify the background color/width of individual tooltips through JavaScript.
Cool DHTML Tooltip intelligently detects the four edges of the browser window, always displaying itself in full view of the user.

Cool!

Demo (move your mouse over):

JavaScript Kit

CodeTricks.com

Learn how to calculate the difference between two dates in JavaScript, and in the process, derive some useful applications such as counting down to a particular event, counting up, displaying what's new on your page etc.

Directions:

Step 1: Insert the following stylesheet into the <head> section of your page:

Step 2: Insert the below code into the <body> section of your page, outside any other tags, especially relatively or absolutely positioned elements:

Select All
<div id="dhtmltooltip"></div> <script type="text/javascript"> /*********************************************** * Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full 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: Finally, add the following inside any link or page element that will contain a tooltip:

onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)";
onMouseout="hideddrivetip()"

The key here is function ddrivetip(), which you should understand how it works:

ddrivetip('TEXT TO DISPLAY', 'OPTIONAL BACKGROUND COLOR', OPTIONAL TIP WIDTH)

The last two parameters are optional, and not specifying them causes the script to default to the settings within your CSS file. With that in mind, here are a few actual usage examples:

<a href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com')";
 onMouseout="hideddrivetip()">Search Engine</a>

<DIV onMouseover="ddrivetip('This DIV has a tip!', '#EFEFEF')";
 onMouseout="hideddrivetip()">Some text here. Some text here.</div>

<a href="http://yahoo.com" onMouseover="ddrivetip('Yahoo\'s Site', 'yellow', 250)";
 onMouseout="hideddrivetip()">Yahoo</a>

One last important point: If your tooltip description contains apostrophes ('), be sure to backslash them first, as illustrated in the last example ("Yahoo\'s Site"), or an error will occur.