adding a tooltip for each option item in drop down menu

**maria_megha** · 02-03-2011 09:53 AM

I have a scenario where I show a drop-down-with-few-items in a JSP page, to the user.
The length of few options in the drop down is greater than that of the drop down's, hence our requirement is to show the hovered (not selected) option as tooltip for user's convenience. I cannot use the title attribute option as its not compatible with my web browser

**Kor** · 02-03-2011 09:56 AM

Anyway, there is no way to do that cross-browser, as IE does not accept any event upon OPTION elements, onmouseover included.

**WolfShade** · 02-03-2011 10:00 AM

Originally Posted by Kor

Anyway, there is no way to do that cross-browser, as IE does not accept any event upon OPTION elements, onmouseover included.

According to w3schools.com, OPTION does have an onMouseOver event.

http://www.w3schools.com/tags/tag_option.asp

overLib by Erik Bosrup is very cross-browser compatible and should work for what you are looking for.

http://www.bosrup.com/web/overlib/

^_^

**Kor** · 02-03-2011 11:50 AM

Originally Posted by WolfShade

According to w3schools.com, OPTION does have an onMouseOver event.

According to the standards there are many things. But the bitter truth is that IE does not follow the standards entirely. In fact no browser follows the standards entirely. Before saying that something exists, you should have simply tested it. IE does not accept events on OPTION elements, at least not up to the version 8 included. It is as simple a that.

The only solve could be to create, graphically, elements which look like list boxes, but made from divs, and controlled by javascript functions. But this could be a much too intricate solution for the OP.

**maria_megha** · 02-03-2011 12:24 PM

hey then could you show with 1 simple example using div and graphical elements.. or some alt way to show option elements whic cannot be shown fully in the list box

**WolfShade** · 02-03-2011 02:42 PM

Give this a shot: http://dossett.org/11/No_onmouseover_for_options_in_IE/

^_^

**JMRKER** · 02-03-2011 04:24 PM

Originally Posted by maria_megha

hey then could you show with 1 simple example using div and graphical elements.. or some alt way to show option elements whic cannot be shown fully in the list box

Originally Posted by WolfShade

Give this a shot: http://dossett.org/11/No_onmouseover_for_options_in_IE/

^_^

Not as neat as link, but maybe you could modify this attempt at a "Fake Selectbox"

Code:

<html>
<head>
<title>Fake Select Box</title>
<script type="text/javascript">
// For:

function showImg(info) {
  document.location.href = info;
}
</script>
<style type="text/css">
li { 	list-style-type: none; 
	border:1px solid blue; 
	background:white;
}
li:hover { background:yellow; }

.imgPic { height:20px; width:20px; }
</style>

</head>
<body>
<div style="height:134px;width:100px;overflow:auto">
 <li><a href="http://www.nova.edu/hpd/otm/pics/4fun/Faces.html">Select</a></li>
 <li title="Exhausted">
	<img src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg" onclick="showImg(this.src)" class="imgPic">
 1st </li>
 <li title="Confused">
	<img src="http://www.nova.edu/hpd/otm/pics/4fun/12.jpg" onclick="showImg(this.src)" class="imgPic">
 2nd </li>
 <li title="Ecstatic">
	<img src="http://www.nova.edu/hpd/otm/pics/4fun/13.jpg" onclick="showImg(this.src)" class="imgPic">
 3rd </li>
 <li title="Guilty">
	<img src="http://www.nova.edu/hpd/otm/pics/4fun/14.jpg" onclick="showImg(this.src)" class="imgPic">
 4th </li>
 <li title="Suspicious">
	<img src="http://www.nova.edu/hpd/otm/pics/4fun/15.jpg" onclick="showImg(this.src)" class="imgPic">
 5th </li>
 <li title="Angry">
	<img src="http://www.nova.edu/hpd/otm/pics/4fun/21.jpg" onclick="showImg(this.src)" class="imgPic">
 6 </li>
 <li title="Hysterical">
	<img src="http://www.nova.edu/hpd/otm/pics/4fun/22.jpg" onclick="showImg(this.src)" class="imgPic">
 7 </li>
 <li title="Frustrated">
	<img src="http://www.nova.edu/hpd/otm/pics/4fun/23.jpg" onclick="showImg(this.src)" class="imgPic">
 8 </li>
 <li title="Sad">
	<img src="http://www.nova.edu/hpd/otm/pics/4fun/24.jpg" onclick="showImg(this.src)" class="imgPic">
 9 </li>
 <li title="Confident">
	<img src="http://www.nova.edu/hpd/otm/pics/4fun/25.jpg" onclick="showImg(this.src)" class="imgPic">
 10 </li>
</div>
</body>
</html>

Several options included with a bit of study...
Good Luck!

**Kor** · 02-04-2011 03:54 AM

Originally Posted by WolfShade

Give this a shot: http://dossett.org/11/No_onmouseover_for_options_in_IE/

^_^

man, you are quite stubborn. have you test that in IE? It does not work. What you see in IE is the title attribute's value. Or the OP says that he can not use the title attribute for whichever reason.

**maria_megha** · 02-04-2011 04:37 AM

hey my requirement is almost the same as what the code implements in http://dossett.org/11/No_onmouseover_for_options_in_IE/
..only thing now is can you people modify that code to make it work for just single select rather than multiple select?

**Kor** · 02-04-2011 04:46 AM

Originally Posted by maria_megha

hey my requirement is almost the same as what the code implements in http://dossett.org/11/No_onmouseover_for_options_in_IE/
..only thing now is can you people modify that code to make it work for just single select rather than multiple select?

Yes, but that code uses the title attribute to make it works somehow even in IE. Or, you have stated in your first post:

Originally Posted by maria_megha

I cannot use the title attribute option as its not compatible with my web browser

So?

By the way. How's that "as its not compatible with my web browser"? I have never heard about a browser which is incompatible with the title HTML attribute.

**maria_megha** · 02-04-2011 04:52 AM

I mean to say title attribute doesnt serve the purpose of showing tooltips on each option items in a drop down menu when i use the it..but that program code implements it indirectly

**Kor** · 02-04-2011 05:00 AM

Originally Posted by maria_megha

I mean to say title attribute doesnt serve the purpose of showing tooltips on each option items in a drop down menu when i use the it..but that program code implements it indirectly

OK. use it.

**WolfShade** · 02-04-2011 07:59 AM

Originally Posted by Kor

man, you are quite stubborn. have you test that in IE? It does not work. What you see in IE is the title attribute's value. Or the OP says that he can not use the title attribute for whichever reason.

I was tenacious in my pursuit of this idea because I knew I had seen it, before, and knew it was possible; I just couldn't remember _where_ I'd seen it. So, I did some Google searching and found a potential solution.

^_^

**Kor** · 02-04-2011 08:13 AM

Originally Posted by WolfShade

I was tenacious in my pursuit of this idea because I knew I had seen it, before, and knew it was possible; I just couldn't remember _where_ I'd seen it. So, I did some Google searching and found a potential solution.

^_^

I agree, but maybe it was a misunderstanding. You found a solution to make an OPTION to have a title (which was not the OP's desire, at least OP was confusing in the first post about that), but not to accept an event. I keep on my first statement: In Internet Explorer there is no possibility to attach an event to an OPTION element. IE simply takes the SELECT element as being the only element there, and ignores almost completely the OPTION as independent elements.

**maria_megha** · 02-04-2011 08:57 AM

okies so onmouseover event doesnt work for option elements in IE..i want to display tooltips for each option element..I googled and found that using title attribute is the solution for firefox but not for IE..SO now what do you suggest to make possible for a tooltip to appear on each option element?

Thread: adding a tooltip for each option item in drop down menu

Thread Tools

Display

adding a tooltip for each option item in drop down menu

javascript

Something else to consider ...

tooltips for option items in a single select box

title attribute not showing tooltips

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions