title: Show tooltip content when its hovers
body: <p>i am using this <a href="http://sixrevisions.com/css/css-only-tooltips/" rel="nofollow">Tooltips with Just CSS</a> this is great. i am using this tool-tip to show big size images, but the problem is, this tool-tips makes my website slower because this used to load all the images when the website load... So, my question is how to Show tooltip content only when its hovers? So, the images will not load when the site will load.<br>I have followed this article <a href="http://html5beta.com/jquery-2/a-little-guide-about-jqueryui-tooltip-ajax-callback/" rel="nofollow">A little guide about jqueryui tooltip ajax callback</a> and also this <a href="http://jsfiddle.net/tvHT3/" rel="nofollow">jsfiddle</a></p>
  
  <pre><code>$('#tippy').tooltip({
  content: '... waiting on ajax ...',
  open: function(evt, ui) {
      var elem = $(this);
      $.ajax('/echo/html').always(function() {
          elem.tooltip('option', 'content', 'Ajax call complete');
       });
  }
  });
  </code></pre>
  
  <p>but can't understand how to use this with the tool-tip ... any idea?</p>