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

jquery html jquery-plugins tooltip
Metalshark picture Metalshark · Jul 14, 2010 · Viewed 135.4k times · Source

Either using plain HTML or jQuery assisted JavaScript, how do you display tooltips on individual <option> 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 <select> wrapped <option> 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.

Answer

Jack.R.Abbit picture Jack.R.Abbit · Jul 6, 2012

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:

<option value="" title="Tooltip">Some option</option>

This worked in Chrome 20, IE 9 (and its 8 & 7 modes), Firefox 3.6, RockMelt 16 (Chromium based) all on Windows 7

Related questions

How add spaces between Slick carousel item

I want to add space between two slick carousel items, but not want the space with padding, because it's reducing my element size(and I don't want that). Somehow I am getting space from both side, I am trying to …

Read More
Fancybox is not a function

Hello I am using the jQuery plugin fancybox to display bing maps when somebody enters an address into a textbox and hits the submit button beside it. And a fancybox is loaded and a map for that address is displayed. …

Read More
jQuery Fade in Site/Content Once It's Loaded?

Are there any tutorials or plugins for fading a site into view once its loaded properly, to limit any jarring etc, so the content appears smoothly basically? I suppose it would be easier if it was just a specific area, …

Read More