title: jQuery's tooltip issue with position and hover
body: <p>I have the following code example (see below). My problem is that the tooltip doesn't show the "old" text after I go away with the cursor - any ideas?</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  #tooltip {
      position: absolute;
      background: #FFF;
      display: none;
  }
  &lt;/style&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      $('body').append('&lt;div id="tooltip"&gt;&lt;/div&gt;');
      var tt = $('#tooltip');
      $('a.tooltip').each(function(){
          $(this).data('title', this.title).attr('title', '');
      }).hover(function(){
          var t = $(this), o = t.offset();
          tt.html(t.data('title')).css({top: o.top, left: o.left}).fadeIn('fast');        
      },
      function(){
          tt.css({display: 'none'});
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;a href="#" class="tooltip" title="VeryLongTextMoreTextVeryLongText"&gt;VeryLongText...VeryLongText&lt;/a&gt; 
  </code></pre>