title: multiple tooltips with different images on same page
body: <p>I've made some tooltips using JQuery Tools, which works fine but I want a second tooltip on the same page with a different image, and I don't know how. Here is my code:</p>
  
  <pre><code>&lt;span id="tip"&gt;
      &lt;img src="images/info20.png" title="(popup text)" /&gt;
  &lt;/span&gt;
  
  $(function() {  
      $("#tip img[title]").tooltip({position: "top right", offset:[0,-25]});
  });
  
  .tooltip {
      display:none;
      font-family: arial;
      background: url(../images/purple.png);
      font-size:11px;
      height:70px;
      width:160px;
      padding:25px;
      color:#fff; 
  }
  </code></pre>
  
  <p>I thought I should just be able to make one the same as this but change "tooltip" to "tooltip2" and select a different image in the CSS but this doesn't work. Can anyone help? Unfortunately the forums on JQuery Tools seem to be broken so I can't get any help there.</p>
  
  <p>Thanks.</p>