How can I display a tooltip on an HTML option tag

Question

Either using plain HTML or jQuery assisted JavaScript  how do you display tooltips on individual  lt option gt  elements to aid the decision process  there is not enough room for a different kind of control and some help will be needed    Can this be done though a plug-in or similar   I have tried a few tooltip plugins for jQuery with no success  including the one called Tooltip    This solution should    work in IE  WebKit as well as Gecko  utilizing standard  lt select gt  wrapped  lt option gt  elements    So if the solution wants to use other tags it should convert those elements into what it needs dynamically  and not expect the initial mark-up to be any different      The code for this can be found here  it is under the SafeSurf section  where I want to display some help on rollover of the options as to the meaning of the choices  At present it can only be displayed  after the fact  and some upfront help for the user would be beneficial   Appreciate that this is not easy and that something will probably need to be created - so the bounty will be awarded to the most complete solution or the specific hook that lands me closest to a solution I can create

User · Answer

At least on firefox  you can set a  title  attribute on the option tag    lt option value    title  Tooltip  gt Some option lt  option gt

User · Answer

I just tried doing this on Chrome   var  sel       sel     sel find  option   hover function    sel attr  title    this  attr  title    console log   this  attr  title      function    sel attr  title            However  the hover enter never fires    So you wouldn t be able to do this at all using the standard select  You could achieve this though through some non standard ways    You could fake a select box by using radio boxes that look like dropdowns  So for example  have a radio box absolute positioned and opacity set to 0 placed over the styled box that is pretending to be the option  Or you could use pure javascript and have a series of boxes and adding javascript onclick events to recreate the dropbox yourself - so you will update a hidden value with whichever box was clicked using javascript  Or use one of the non standard libraries already out there   If there are any

User · Answer

If increasing the number of visible options is available  the following might work for you    lt html gt       lt head gt           lt title gt Select Option Tooltip Test lt  title gt           lt script gt              function showIETooltip e                   if  e  var e   window event                   var obj   e srcElement                  var objHeight   obj offsetHeight                  var optionCount   obj options length                  var eX   e offsetX                  var eY   e offsetY                     vertical position within select will roughly give the moused over option                    var hoverOptionIndex   Math floor eY    objHeight   optionCount                     var tooltip   document getElementById  dvDiv                    tooltip innerHTML   obj options hoverOptionIndex  title                   mouseX e pageX e pageX e clientX                  mouseY e pageY e pageY e clientY                   tooltip style left mouseX 10                  tooltip style top mouseY                   tooltip style display    block                    var frm   document getElementById  frm                    frm style left   tooltip style left                  frm style top   tooltip style top                  frm style height   tooltip offsetHeight                  frm style width   tooltip offsetWidth                  frm style display    block                             function hideIETooltip e                   var tooltip   document getElementById  dvDiv                    var iFrm   document getElementById  frm                    tooltip innerHTML                       tooltip style display    none                   iFrm style display    none                          lt  script gt       lt  head gt       lt body gt           lt select onmousemove  showIETooltip     onmouseout  hideIETooltip     size  10  gt               lt option title  Option  1  value  1  gt Option  1 lt  option gt               lt option title  Option  2  value  2  gt Option  2 lt  option gt               lt option title  Option  3  value  3  gt Option  3 lt  option gt               lt option title  Option  4  value  4  gt Option  4 lt  option gt               lt option title  Option  5  value  5  gt Option  5 lt  option gt               lt option title  Option  6  value  6  gt Option  6 lt  option gt               lt option title  Option  7  value  7  gt Option  7 lt  option gt               lt option title  Option  8  value  8  gt Option  8 lt  option gt               lt option title  Option  9  value  9  gt Option  9 lt  option gt               lt option title  Option  10  value  10  gt Option  10 lt  option gt           lt  select gt           lt div id  dvDiv  style  display none position absolute padding 1px border 1px solid  333333  background-color  fffedf font-size smaller z-index 999   gt  lt  div gt           lt iframe id  frm  style  display none position absolute z-index 998  gt  lt  iframe gt       lt  body gt   lt  html gt

User · Answer

I don t think this would be possible to do across all browsers   W3Schools reports that the option events exist in all browsers  but after setting up this test demo  I can only get it to work for Firefox  not Chrome or IE   I haven t tested it on other browsers   Firefox also allows mouseenter and mouseleave but this is not reported on the w3schools page     Update  Honestly  from looking at the example code you provided  I wouldn t even use a select box  I think it would look nicer with a slider  I ve updated your demo  I had to make a few minor changes to your ratings object  adding a level number  and the safesurf tab  But I left pretty much everything else intact

User · Answer

It seems in the 2 years since this was asked  the other browsers have caught up  at least on Windows    not sure about others   You can set a  title  attribute on the option tag    lt option value    title  Tooltip  gt Some option lt  option gt   This worked in Chrome 20  IE 9  and its 8  amp  7 modes   Firefox 3 6  RockMelt 16  Chromium based  all on Windows 7

User · Answer

Why use a dropdown at all  The only way the user will see your explanatory text is by blindly hovering over one of the options   I think it would be preferable to use a radio button group  and next to each item  put a tooltip icon indicating additional information  as well as displaying it after selection  like you currently have it    I realize this doesn t exactly solve your problem  but I don t see the point in struggling with an html element that s notorious for its inflexibility when you could just use one that s better suited in the first place

User · Answer

I don t believe that you can achieve this functionality with standard  lt select gt  element    What i would suggest is to use such way   http   filamentgroup com lab jquery ipod style and flyout menus   The basic version of it won t take too much space and you can easily bind mouseover events to sub items to show a nice tooltip   Hope this helps  Sinan

[jquery] How can I display a tooltip on an HTML "option" tag?

Examples related to jquery

Examples related to html

Examples related to jquery-plugins

Examples related to tooltip