title: Uncaught ReferenceError: "$ is not defined"
body: <p>This is a tooltip js function that I found on the internet and re-coded it due to defensive programming. But the orginal code and my code have same Google Chrome Console Error Message.</p>
  
  <p>Message says: </p>
  
  <blockquote>
    <p>Uncaught ReferenceError: $ is not defined.</p>
  </blockquote>
  
  <p>The error is generating for the following line.</p>
  
  <pre><code>$(document).ready(function(){...
  </code></pre>
  
  <p>The code is working fine without a bug. In the main function, the console is not giving an error message for <code>$</code> signs.</p>
  
  <p>An example:</p>
  
  <pre><code>$(document).ready(function(){... //no error on console for "$"
  </code></pre>
  
  <p>So, Is this a bug of Chrome Browser's Console Or is it my fault?</p>
  
  <pre><code>this.tooltip = function(){  
      /* CONFIG */        
          xOffset = 10;
          yOffset = 20;       
          // these 2 variable determine popup's distance from the cursor
          // you might want to adjust to get the right result     
      /* END CONFIG */        
      $("a.tooltip").hover(function(e){   
          if (this.t) 
              this.t = this.title;
          this.title = "";                                      
          $("body").append("&lt;p id='tooltip'&gt;"+ this.t +"&lt;/p&gt;");
          $("#tooltip")
              .css("top",(e.pageY - xOffset) + "px")
              .css("left",(e.pageX + yOffset) + "px")
              .fadeIn("fast");        
      },
      function(){
          this.title = this.t;        
          $("#tooltip").remove();
      }); 
      $(".tooltip").mousemove(function(e){
          $("#tooltip")
              .css("top",(e.pageY - xOffset) + "px")
              .css("left",(e.pageX + yOffset) + "px");
      });         
  };
  
  $(document).ready(function(){
      tooltip();
  });
  </code></pre>