title: FancyBox and custom tooltip together wont work
body: <p>I am using FancyBox and a very simple jQuery tooltip together, if not clicked on images yet, the tooltip is for showing the "titles" on the page. If clicked a image the fancybox will take over the title to display title tag "inside".
  The title doesn't show up once clicked the image, but the tooltip is OK. Is it possible to make them work together?</p>
  
  <p>Here is the jQuery for tooltip:</p>
  
  <pre><code>$(document).ready(function(){
      tooltip();
  });
  
  this.tooltip = function(){  
      $("a.tooltip").hover(function(e){                                             
          this.t = this.title;
          this.title = "";                                      
          $("body").append("&lt;p id='tooltip'&gt;"+ this.t +"&lt;/p&gt;");
          $("#tooltip").fadeIn("fast");       
      },
      function(){
          this.title = this.t;        
          $("#tooltip").remove();
      }); 
      $("a.tooltip").mousemove(function(e){
          $("#tooltip")
  
      });         
  };
  </code></pre>
  
  <p>Here is my FancyBox code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $("a#example8").fancybox({
              'titlePosition': 'over'
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>This is HTML code:</p>
  
  <pre><code>&lt;a id="example8" class="tooltip" href="./example/8_b.jpg" title="Sed vel sapien vel sem tempus placerat eu ut tortor. Nulla facilisi. Sed adipiscing, turpis ut cursus molestie, sem eros viverra mauris, quis sollicitudin sapien enim nec est. ras pulvinar placerat diam eu consectetur."&gt;
      &lt;img class="last" alt="example7" src="./example/8_s.jpg" /&gt;
  &lt;/a&gt;
  </code></pre>