Question

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();
});

Answer 1

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.