www.webdeveloper.com
+ Reply to Thread
Page 1 of 2 1 2 LastLast
Results 1 to 15 of 28

Hybrid View

  1. 02-03-2011 09:53 AM #1
    maria_megha
    maria_megha is offline Registered User
    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
    Reply With Quote Reply With Quote
  2. 02-03-2011 09:56 AM #2
    Kor's Avatar
    Kor
    Kor is offline Red Devil Moderator
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,427
    Anyway, there is no way to do that cross-browser, as IE does not accept any event upon OPTION elements, onmouseover included.
    KOR
    Windows Forum
    Register as or Find a freelancer
    Offshore programming
    Reply With Quote Reply With Quote
  3. 02-03-2011 10:00 AM #3
    WolfShade's Avatar
    WolfShade
    WolfShade is offline Registered User
    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/

    ^_^
    Reply With Quote Reply With Quote
  4. 02-03-2011 11:50 AM #4
    Kor's Avatar
    Kor
    Kor is offline Red Devil Moderator
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,427
    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.
    KOR
    Windows Forum
    Register as or Find a freelancer
    Offshore programming
    Reply With Quote Reply With Quote
  5. 02-03-2011 12:24 PM #5
    maria_megha
    maria_megha is offline Registered User
    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
    Reply With Quote Reply With Quote
  6. 02-03-2011 02:42 PM #6
    WolfShade's Avatar
    WolfShade
    WolfShade is offline Registered User
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Give this a shot: http://dossett.org/11/No_onmouseover_for_options_in_IE/

    ^_^
    Reply With Quote Reply With Quote
  7. 02-04-2011 08:57 AM #7
    maria_megha
    maria_megha is offline Registered User
    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?
    Reply With Quote Reply With Quote
  8. 02-04-2011 10:12 AM #8
    JMRKER's Avatar
    JMRKER
    JMRKER is offline Super Moderator
    Join Date
    Dec 2005
    Location
    FL
    Posts
    6,950

    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.
    Reply With Quote Reply With Quote
  9. 02-04-2011 10:43 AM #9
    maria_megha
    maria_megha is offline Registered User
    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?
    Reply With Quote Reply With Quote
  10. 02-04-2011 11:31 AM #10
    JMRKER's Avatar
    JMRKER
    JMRKER is offline Super Moderator
    Join Date
    Dec 2005
    Location
    FL
    Posts
    6,950

    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.
    Reply With Quote Reply With Quote
  11. 02-07-2011 02:33 AM #11
    Kor's Avatar
    Kor
    Kor is offline Red Devil Moderator
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,427
    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/
    KOR
    Windows Forum
    Register as or Find a freelancer
    Offshore programming
    Reply With Quote Reply With Quote
  12. 02-04-2011 09:02 AM #12
    Kor's Avatar
    Kor
    Kor is offline Red Devil Moderator
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,427
    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?
    KOR
    Windows Forum
    Register as or Find a freelancer
    Offshore programming
    Reply With Quote Reply With Quote
  13. 02-04-2011 09:07 AM #13
    maria_megha
    maria_megha is offline Registered User
    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...
    Reply With Quote Reply With Quote
  14. 02-04-2011 09:22 AM #14
    Kor's Avatar
    Kor
    Kor is offline Red Devil Moderator
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,427
    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.
    KOR
    Windows Forum
    Register as or Find a freelancer
    Offshore programming
    Reply With Quote Reply With Quote
  15. 02-04-2011 09:26 AM #15
    maria_megha
    maria_megha is offline Registered User
    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?
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

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

     

Tags for this Thread

Bookmarks

Posting Permissions

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

Forum Rules

 HTML5 Development Center



Recent Articles