jQuery .live() To The Rescue

Recently, I needed a very basic tooltip plugin to use with jQuery to display some additional descriptive information to the end user.  My only requirement for the tooltip was to allow for some basic css styling.   There are COUNTLESS tooltip plugins for jQuery, but most of them are way too big and contain features that I didn't need (at least for this project).    Since the customer was very concerned about page load times and I was already using a few different plugins, I needed something small and light.

Fortunately, I stumbled upon the following code that, at first, seemed to fit the bill: 

function tooltip(){   
    $("a.tooltip").hover(
        function(e){
        this.t = this.title;
        this.title = "";
        $("body").prepend("<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();
        }
    );
    $("a.tooltip").mousemove(function(e){
            $("#tooltip")
                    .css("top",(e.pageY - xOffset) + "px")
                    .css("left",(e.pageX + yOffset) + "px");
    });
};

$(document).ready(function(){
    tooltip();
});

On a basic page, this worked fine.   The problem came when I wanted to use tooltips for dyanmic content loaded onto the page via ajax.   Since the hover and mousemove events were being bound to the page on page-load, new tooltip anchors loaded through ajax were not working.

I attempted to call the tooltip function within a $.ready() statement with each new ajax call.  This succesfully bound the events to the new content,  however, the existing tooltip anchors would now trigger multiple events which wreaked havoc on the funtionality.

jQuery .live() To The Rescue:

The jQuery .live() even handler was the answer to my problems.  Instead of cycling through the DOM and binding an event handler to each relavent object, .live() binds a special handler to the root of the DOM tree.  This handler is called when a matching event bubbles up through the DOM regalrdless of when the code in question was placed in the DOM tree.

I went ahead a changed the tooltip code to use the .live() handler and, BINGO,  everything worked perfectly.   Here is the altered code:

function tooltip(){   
        xOffset = 10;
        yOffset = 20;
    
    $("a.tooltip").live('mouseover',function(e){
        this.t = this.title;
        this.title = "";
        $("body").prepend("<p id='tooltip'>"+ this.t +"</p>");
        $("#tooltip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")                       
            .fadeIn("fast");
    });
    $("a.tooltip").live('mouseout',function(){
            this.title = this.t;
            $("#tooltip").remove();
    });
    $("a.tooltip").live('mousemove',function(e){
            $("#tooltip")
                    .css("top",(e.pageY - xOffset) + "px")
                    .css("left",(e.pageX + yOffset) + "px");
    });
};

   Tweet