Departments
Departments
Departments
SUBSCRIBE TO NEWSCONTACT US
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");
});
};
Steve is a senior application developer with nearly a decade of experience in the IT industry. Now specializing in web technologies, Steve worked for many years implementing speech recognition IVR applications for fortune 500 companies.
This article is under Geek Factor, Programming, Web Programming
There is 1 comment for this post
250 West Nyack Road, Suite #200 West Nyack, NY 10994
Get Directions
877-GO-RUSTY
877-467-8789
845-369-6869
845-228-8177
1 COMMENT