1

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.

Message says:

Uncaught ReferenceError: $ is not defined.

The error is generating for the following line.

$(document).ready(function(){...

The code is working fine without a bug. In the main function, the console is not giving an error message for $ signs.

An example:

$(document).ready(function(){... //no error on console for "$"

So, Is this a bug of Chrome Browser's Console Or is it my fault?

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("<p id='tooltip'>"+ this.t +"</p>");
        $("#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();
});
Foreever
  • 7,099
  • 8
  • 53
  • 55
Lost_In_Library
  • 3,265
  • 6
  • 38
  • 70
  • 1
    So, you're seeing `$ is not defined` in the console, but the code is working correctly? – Rory McCrossan Feb 10 '12 at 15:55
  • Yes... This code in main.js. And I call it from my html like; < script type="text/javascript" src="main.js">< /script> < script type="text/javascript" src="jquery-1.7.1.min.js">< /script> – Lost_In_Library Feb 10 '12 at 15:56
  • 1
    *Inception* was easier to understand... Can't you just say "the tooltip function" or "the ready handler" ? – Didier Ghys Feb 10 '12 at 15:57
  • 1
    Include first jQuery, then your main.js script ! – Didier Ghys Feb 10 '12 at 15:57
  • The reason $ works in the Chrome console is because it [maps to `document.querySelector`](https://developer.chrome.com/devtools/docs/commandline-api) for developer convenience... and formerly, document.getElementById. Wait, this question is old... – gengkev May 03 '15 at 03:00

2 Answers2

8

Are you calling your JavaScript files sequentially/ correctly?

For instance

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="main.js"></script>

it has something to do probably with the way you are calling your javascript in the header of your document it sounds.

Based on your comment I just saw... Main.js must be AFTER jquery.js.

Downpour046
  • 1,661
  • 9
  • 14
0

Are you adding jQuery? Maybe sounds silly to ask, but with the code you provide there is nothing that defiends jQuery.

Simon Edström
  • 6,461
  • 7
  • 32
  • 52