How can I add mouse hover functionality to the OPTION tag?

In my JSP I am trying to add mouse hover in the drop-down list options using the <SPAN> tag in the option’s text value.

The reason I am trying to do this, is b/c I need allocate several drop-down list in a row [inside a table], in which I only have certain amount of space.
To be able to allocate all the drop-down list in a row I have to make the width of the drop-down list really small e.g. style=“size:-2;width:70px;”

As a result, the options in the list are not display completely; therefore,
I am trying to add the mouse hove functionality into the drop-down list.
That is, when a user hovers on any option of the drop-down list the entire
option text will be displayed in a small popup text [using the <SPAN> tag]

I create a dummy [for testing purpose] drop-down list to help me illustrate or display what I am trying to do.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Test 1</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>
</head>

<body>
Test Drop-Down menu
<div id=“searchit”>
<select style=“size:-2;width:70px;”>
<option value =“0”><SPAN title=“TEST 0”>AB AT HOME</SPAN></option>
<option value =“1”><SPAN title=“TEST 1”>AC AT HOME</SPAN></option>
<option value =“2”><SPAN title=“TEST 2”>AD AT HOME</SPAN></option>
<option value =“3”><SPAN title=“TEST 3”>BILLY</SPAN></option>
<option value =“4”><SPAN title=“TEST 4”>BRAND</SPAN></option>
<option value =“5”><SPAN title=“TEST 5”>BURRO</SPAN></option>
<option value =“6”><SPAN title=“TEST 6”>DARK</SPAN></option>
<option value =“7”><SPAN title=“TEST 7”>DESIGNER</SPAN></option>
<option value =“8”><SPAN title=“TEST 8”>DICOR</SPAN></option>
<option value =“9”><SPAN title=“TEST 9”>EDUCATION</SPAN></option>
<option value =“10”><SPAN title=“TEST 10”>ENTERTAINMENT</SPAN></option>
<option value =“11”><SPAN title=“TEST 11”>GENERIC</SPAN></option>
<option value =“12”><SPAN title=“TEST 12”>LILLY PULITZER</SPAN></option>
<option value =“13”><SPAN title=“TEST 13”>MARQUIS</SPAN></option>
<option value =“14”><SPAN title=“TEST 14”>OPEN LINE</SPAN></option>
<option value =“15”><SPAN title=“TEST 15”>PROPRIETARY</SPAN></option>
<option value =“16”><SPAN title=“TEST 16”>SAPER 300</SPAN></option>
<option value =“17”><SPAN title=“TEST 17”>SPORTS</SPAN></option>
<option value =“18”><SPAN title=“TEST 18”>SUPREME DIMENSIONS</SPAN></option>
<option value =“19”><SPAN title=“TEST 19”>SUTREME DIMENSIONS</SPAN></option>
<option value =“20”><SPAN title=“TEST 20”>TEST</SPAN></option>
</select>
</div>
<h1>
<pre>
Mouse HOVER in the drop-down list options.
</pre>
</h1>
</body>
</html>

Does anyone have any idea on how to add the mouse hover functionality in the drop-down list using the <SPAN> tag?

Any other solutions :slight_smile: with the same end result are welcome [using JavaScript - I thought about using onMouseOver]…

  1. This is a JavaScript question, not a Java question. Thread moved.
  2. Most browsers will display the full width of the select list options when you expand the list, even if the drop-down element isn’t big enough to display the selected option fully.
  3. To add a tooltip to options in browsers that support it, simply set the title attribute on each option tag.
    <select style="size:-2;width:70px;"> <option value="0" title="TEST 0">AB AT HOME</option> <option value="1" title="TEST 1">AC AT HOME</option> <option value="2" title="TEST 2">AD AT HOME</option> <option value="3" title="TEST 3">BILLY</option> <option value="4" title="TEST 4">BRAND</option> <option value="5" title="TEST 5">BURRO</option> </select>

Kevin Yank,

I am trying to get this functionality working in “Microsoft Internet Explorer” Version 6.0

I try doing what you suggested here
3. To add a tooltip to options in browsers that support it, simply set the title attribute on each option tag.

<select style=“size:-2;width:70px;”>
<option value=“0” title=“TEST 0”>AB AT HOME</option>
<option value=“1” title=“TEST 1”>AC AT HOME</option>
<option value=“2” title=“TEST 2”>AD AT HOME</option>
<option value=“3” title=“TEST 3”>BILLY</option>
<option value=“4” title=“TEST 4”>BRAND</option>
<option value=“5” title=“TEST 5”>BURRO</option>
</select>

But when I hover an option of the drop-down list [say BILLY] it did not display in a separate text the title [for BILLY it will be TEST 3].

This example gives a single scenario of what I need in the drop-down list
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Test 2</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>
</head>

<body>
<pre>
<h1>
Mouse HOVER the text below.
</h1>
</pre>
<span title=“THIS IS WHAT I WANT TO DISPLAY WHEN I HOVER! An OPTION of the drop-down list.”><b>An OPTION of the drop-down list.</b></span>
</body>
</html>

IE/Win doesn’t support that. It doesn’t seem to support any kind of event on <option> elements and it doesn’t create tooltips from the title attribute of <option>.

You could try using a DHTML <select> element emulation script.

Yep, if you need to do it in Internet Explorer, your only choice will be to use a DHTML script that displays the equivalent of a <select> element.

Kevin / Kravvitz,

you mean to use JavaScript?

<option onMouseOver=“dispalyAltText();”>BILLY</option>

or something like that… I’ll work on it. Thx.

DHTML is short for Dynamic HTML, which means X/HTML used in conjunction with JavaScript and CSS.

We do not mean to use something like the code there, because the whole problem here is that that doesn’t work in IE/Win.

I can’t seem to find an example of what we mean.

Here’s what we’re talking about:

Making a dropdown with DOM scripting - SitePoint DHTML & CSS Blog

Kevin / Kravvitz,

Thanks, That helps. have a great weekend.