Question

I’m working on a very light “tooltip” jQuery plugin. Bellow is the code:

(function( $ ) {
  $.fn.tooltip = function() {

    return this.each(function(){

        var target = $(this);

        target.on("mouseover", function(event){
            var tooltip = $(document.createElement("div"));
            tooltip
                .html(target.attr("tooltip-text"))
                .addClass("tooltip")
                .css({
                     "top" : event.pageY, 
                     "left":event.pageX 
                     })
                .fadeIn(300);                               
        }); 

    });

  };
})( jQuery );

And I apply it like so:

<script>
    $("div.product").tooltip();
</script>   

The idea is to have the tooltip appear when the user hovers the DIV, next to the cursor.
However, when I hover such a DIV (class “product”), the script crashes at the .addClass(“tooltip”) line:

Uncaught TypeError: Object has no method ‘addClass’

What is it that I’m doing wrong?

Answer 1

It’s because you’re assigning the attribute tooltip-text:

  .html(target.attr("tooltip-text"))

The attribute is undefined, so it screws up the chaining of your jQuery events. Try doing this:

  .html(target.attr("tooltip-text") || "")

You also don’t need to stick the execution in window.onload, putting it in a standard document ready will work fine.