www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 28

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

  1. #1
    Join Date
    Jan 2011
    Posts
    13

    adding a tooltip for each option item in drop down menu

    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

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Anyway, there is no way to do that cross-browser, as IE does not accept any event upon OPTION elements, onmouseover included.

  3. #3
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Quote Originally Posted by Kor View Post
    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/

    ^_^

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by WolfShade View Post
    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.
    Last edited by Kor; 02-03-2011 at 11:55 AM.

  5. #5
    Join Date
    Jan 2011
    Posts
    13

    javascript

    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

  6. #6
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Lightbulb Something else to consider ...

    Quote Originally Posted by maria_megha View Post
    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
    Quote Originally Posted by WolfShade View Post
    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!

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by WolfShade View Post
    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.

  9. #9
    Join Date
    Jan 2011
    Posts
    13

    tooltips for option items in a single select box

    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?

  10. #10
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by maria_megha View Post
    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
    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.

  11. #11
    Join Date
    Jan 2011
    Posts
    13

    title attribute not showing tooltips

    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

  12. #12
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by maria_megha View Post
    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.

  13. #13
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Quote Originally Posted by Kor View Post
    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.

    ^_^

  14. #14
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by WolfShade View Post
    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.

  15. #15
    Join Date
    Jan 2011
    Posts
    13
    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 Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles