Adding a tooltip to a Dropdown

This script shows a tooltip on mouse hover over a Dropdown list, and NOT on the individual option items.

The following script shows a tooltip when you Mouse Over on a Select box, and NOT on the individual option items.

This code has been tested in IE 6.0 only. Would be posting the cross-browser solution shortly.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Dropdown with Tooltips</title>
#tooltip {
  position: absolute;
  padding:1px 2px 1px 2px;
  border: 1px solid black;
<script language="javascript" type="text/javascript">
// This function checks the mouse event
function checkEvent(e) {
 if (!e) var e = window.event;
 if ( targ =;
 else if (e.srcElement) targ = e.srcElement;
 showHideToolTip(targ, e, e.type)
// This function shows/hides the tooltip
function showHideToolTip (theDropDown, e, eType)
 var toolTipObj = new Object();
 toolTipObj = document.getElementById("tooltip");
 toolTipObj.innerHTML = theDropDown.options[theDropDown.selectedIndex].value;
 if(eType == "mouseout"){ = "none";
   } else
 { = "inline"; = e.y + 15; = e.x + 10;
<div id="tooltip"></div>
<select id="dropDown1" class="dropDownWidth" onMouseOver="checkEvent(this.event);" onMouseOut="checkEvent(this.event);" onMouseMove="checkEvent(this.event);">
 <option value="This is Option 1">Option1</option>
 <option value="This is Option 2">Option2</option>
 <option value="This is Option 3">Option3</option>
By Vinod Sharma   Popularity  (10348 Views)