Author Topic: Cool DHTML Tooltip  (Read 177 times)

0 Members and 1 Guest are viewing this topic.

Offline MrSpecialist

  • Sr. Member
  • *
  • Posts: 348
  • Karma: +1/-0
  • I'm an expert!
    • View Profile
Cool DHTML Tooltip
« on: December 02, 2008, 06:25:05 AM »
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.



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

Code: [Select]
<style type="text/css">

position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);


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

Code: [Select]
<div id="dhtmltooltip"></div>

<script type="text/javascript">

* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at 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")"px"
if (typeof thecolor!="undefined" && thecolor!="")
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 ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)"5px"
//position the horizontal position of the menu where the mouse is positioned"px"

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight) ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"

function hideddrivetip(){
if (ns6||ie){



Step 3: Finally, add the following inside any link or page element that will contain a tooltip:

Code: [Select]
onMouseover="ddrivetip(\' JavaScript tutorials\',\'yellow\', 300)";
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:

Code: [Select]
<a href="" onMouseover="ddrivetip(\'Visit\')";
 onMouseout="hideddrivetip()">Search Engine[/url]<DIV onMouseover="ddrivetip(\'This DIV has a tip!\', \'#EFEFEF\')";
 onMouseout="hideddrivetip()">Some text here. Some text here.</div><a href="" onMouseover="ddrivetip(\'Yahoo\'s Site\', \'yellow\', 250)";
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.

Techronnati | where technology never sleeps

Cool DHTML Tooltip
« on: December 02, 2008, 06:25:05 AM »

Mountain View


Posting Disclaimer: Any individual may post a message in this forum and may do so anonymously. Therefore, the sole author is exclusively and entirely responsible for all opinions in that message. They do not represent the official opinions of Techronnati, its administrators or moderators or the Techronnati Management. Techronnati is merely acting as an impartial conduit for constitutionally protected free speech and is not responsible and will not be held liable for the content of such messages. All images and service logos are trademarks of their respective owners.