title: Tooltip (jquery)
body: <p>I am working on a tooltip with Jquery but it isnt working. Could you please help me? I dont understand why it is not working ok...</p>
  
  <p>Thanks!!</p>
  
  <pre><code>    .tooltip{
      padding:5px 10px;
      background-color:#e5f4fe;
      border:#5a5959 1px solid;
      position:absolute;
      z-index:9999;
      color:#0c0c0c;
      font-size:0.688em;
      min-width:100px;
      min-height:50px;
  }
  
  .tipBody {
      background-color:#e5f4fe;
      padding:2px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a rel="tooltip" title="Print Results" class="printbtn" href="#"&gt;Print results&lt;/a&gt;
  </code></pre>
  
  <p>JQUERY:</p>
  
  <pre><code>   $(document).ready(function() {
  
      //Select all anchor tag with rel set to tooltip
      $('a[rel=tooltip]').mouseover(function(e) {
  
          //Grab the title attribute's value and assign it to a variable
          var tip = $(this).attr('title');    
  
          //Remove the title attribute's to avoid the native tooltip from the browser
          $(this).attr('title','');
  
          //Append the tooltip template and its value
          $(this).append('&lt;div class="tooltip"&gt;&lt;div class="tipBody"&gt;' + tip + '&lt;/div&gt;&lt;/div&gt;');        
  
          //Show the tooltip with faceIn effect
          $('.tooltip').fadeIn('500');
          $('.tooltip').fadeTo('10',0.9);
  
      }).mousemove(function(e) {
  
          //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
          $('.tooltip').css('top', e.pageY + 10 );
          $('.tooltip').css('left', e.pageX + 20 );
  
      }).mouseout(function() {
  
          //Put back the title attribute's value
          $(this).attr('title',$('.tipBody').html());
  
          //Remove the appended tooltip template
          $(this).children('div.tooltip').remove();
  
      });
  
  });
  </code></pre>