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

Hybrid View

  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 12:55 PM.

  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
    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?

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Wink

    Quote Originally Posted by maria_megha View Post
    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?
    So what were you thoughts on post #7? It creates a fake dropdown that does allow the use of title tooltips without using the <option> tags. You could remove the title settings altogether to use a hover technique to display a more lengthly pop-up description (tooltip). You can decide how many choices to initially display with the CSS setting of the <div> tag. Also allows the graphic that you cannot put into the drop down selection options. Might be a work-around until your company arrives in the 21st century.

  9. #9
    Join Date
    Jan 2011
    Posts
    13

    works in firefox only

    I just upgraded my IE TO VERSION 8..and tried the following piece of code in IE 8..it dint work(dint show tooltip)..but it works perfectly fine if i put it in firefox..
    Code:
    <html>
    <body>
    <select name="selectName">
    <option onmouseover="this.parentNode.title=this.value" value="1 Kibology">1 Kibology</option>
    <option onmouseover="this.parentNode.title=this.value" value="2 Kibology">2 Kibology</option>
    <option onmouseover="this.parentNode.title=this.value" value="3 Kibology">3 Kibology</option>
    <option onmouseover="this.parentNode.title=this.value" value="4 Kibology">4 Kibology</option>
    <option onmouseover="this.parentNode.title=this.value" value="5 Kibology">5 Kibology</option>
    <option onmouseover="this.parentNode.title=this.value" value="6 Kibology">6 Kibology</option>
    <option onmouseover="this.parentNode.title=this.value" value="7 Kibology">7 Kibology</option>
    <option onmouseover="this.parentNode.title=this.value" value="8 Kibology">8 Kibology</option>
    <option onmouseover="this.parentNode.title=this.value" value="9 Kibology">9 Kibology</option>
    </select>
    </body>
    </html>
    now whats the remedy for this?

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Arrow

    Quote Originally Posted by maria_megha View Post
    I just upgraded my IE TO VERSION 8..and tried the following piece of code in IE 8..it dint work(dint show tooltip)..but it works perfectly fine if i put it in firefox..
    ...
    now whats the remedy for this?
    Perhaps when you have a 500 pound gorilla in the room, you do what it wants
    or leave the room.

  11. #11
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by maria_megha View Post
    I just upgraded my IE TO VERSION 8
    OK. Now use this:
    http://dossett.org/11/No_onmouseover_for_options_in_IE/

  12. #12
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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?

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

  14. #14
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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.

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 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