asked on

How to get tooltip for a HTML DropDown options (Select box) ?

I have a select box of limited width. The names of the options are longer than the available select box width. How can I get the full option names appearing as tooltips, when going over the options...

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

joeposter649

Maybe option group's would help you here...
http://www.w3schools.com/tags/tag_optgroup.asp

Heama

<HTML>
<HEAD>
<TITLE>Radhika's ........ :)</TITLE>
<style>
a.info{position: relative;z-index:24;background-color:#ccc; color:#000; text-decoration:none}
a.info:hover{z-index:25}
a.info span{display: none}
a.info:hover span{display:block;
position:absolute; top:2em;left:2em; width:10em;
border:1px solid #000; background-color:#FFFFCC; color:#000;text-align: center}

</style>
<SCRIPT>
function mOver()
{
      document.all.sp.innerHTML = document.a.s.options[document.a.s.selectedIndex].text;
}
function mOut()
{
      document.all.sp.innerHTML = "";
}
</SCRIPT>
</HEAD>
<BODY>
<form name=a>
<a class="info" href="javascript:void(0)">
<select name=s onmouseover="mOver()" onmouseout="mOut()">
      <option value=1>one</option>
      <option value=2>two</option>
      <option value=3>three</option>
</select><span id=sp></span></a>
</form>

</BODY>
</HTML>