title: How can I display a tooltip on an HTML "option" tag?
body: <p>Either using plain HTML or jQuery assisted JavaScript, how do you display tooltips on individual <code>&lt;option&gt;</code> elements to aid the decision process (<em>there is not enough room for a different kind of control and some help will be needed</em>).</p>
  <p>Can this be done though a plug-in or similar?</p>
  <p>I have tried a few tooltip plugins for jQuery with no success (including the one called Tooltip).</p>
  <p>This solution should:</p>
  <ul>
  <li>work in IE, WebKit as well as Gecko;</li>
  <li>utilizing standard <code>&lt;select&gt;</code> wrapped <code>&lt;option&gt;</code> elements.</li>
  </ul>
  <p>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).</p>
  <hr />
  <p>The code for this can be found <a href="https://jsfiddle.net/vaRAA/" rel="noreferrer">here</a>, 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 &quot;after the fact&quot; and some upfront help for the user would be beneficial.</p>
  <p><strong>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.</strong></p>