title: How can I use jquery UI to create image tooltips on top of select options?
body: <p>I have a select box</p>
  
  <pre><code>&lt;select name="template" id="id_template"&gt;
    &lt;option value="" selected&gt;---------&lt;/option&gt;
    &lt;option value="1"&gt;twobytwo&lt;/option&gt;
    &lt;option value="6"&gt;twovert&lt;/option&gt;
    &lt;option value="7"&gt;twohoriz&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And I have images for each select</p>
  
  <p><code>/static/img/twobytwo.png</code></p>
  
  <p><code>/static/img/twovert.png</code> </p>
  
  <p><code>/static/img/twohoriz.png</code></p>
  
  <p>How can I create a tooltip so that when a user hovers over an option, it displays the image associated with the option? All I've found is this which is close but not quite there <a href="http://jsfiddle.net/ndrDc/151/" rel="nofollow noreferrer">http://jsfiddle.net/ndrDc/151/</a></p>
  
  <p>Thanks</p>