adding a tooltip for each option item in drop down menu

This site is best viewed in a modern browser with JavaScript enabled.

adding a tooltip for each option item in drop down menu

maria_megha

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

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

WolfShade

Kor;1137156 wrote:
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

WolfShade;1137157 wrote:
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.:rolleyes:

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

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

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

JMRKER

maria_megha;1137188 wrote:
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;1137224 wrote:
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"

<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

WolfShade;1137224 wrote:
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

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

maria_megha;1137321 wrote:
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:

maria_megha wrote:
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

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

maria_megha;1137329 wrote:
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

Kor;1137312 wrote:
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

WolfShade;1137360 wrote:
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

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?

Kor

Were we talking for nothing so far? WolfShade has already found a solution for you:
http://dossett.org/11/No_onmouseover_for_options_in_IE/

Does it bother you that the select is multiple?

maria_megha

yes.I solved by removing the multiple attribute of select element..bu the next problem with that code is it shows select size=5..so as a result it displays each option items..i got atleast 20-30 option items.So i want a select of size=1..When i make that change tooltips dont appear...

Kor

Wait a minute. Do you use IE6? Because title attribute works OK since IE7... If so, forget about that. IE6 is the worst browser ever. And its share market drops every day. Even Microsoft makes huge efforts to get IE6 out of this world. You should not code for IE6 anymore.

maria_megha

yes I use IE6..i mean to say in my company they use IE6..SO cant help it..can u suggest what need to be done to implement tooltips for option items?

WolfShade

Convince the company to upgrade to at LEAST Internet Explorer 7. To stay with IE6 is counter-productive.