Printable View
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
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.Quote:
Originally Posted by Kor
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/
^_^
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:Quote:
Originally Posted by WolfShade
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.
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
Give this a shot: http://dossett.org/11/No_onmouseover_for_options_in_IE/
^_^
Quote:
Originally Posted by maria_megha
Not as neat as link, but maybe you could modify this attempt at a "Fake Selectbox"Quote:
Originally Posted by WolfShade
Several options included with a bit of study...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>
Good Luck!
:)
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.Quote:
Originally Posted by WolfShade
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:Quote:
Originally Posted by maria_megha
So?Quote:
Originally Posted by maria_megha
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.
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.Quote:
Originally Posted by maria_megha
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.Quote:
Originally Posted by Kor
^_^
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.Quote:
Originally Posted by WolfShade
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?
