Update .hover when new dynamic hyperlinks are added to page???
Hi guys,
It adds cool tooltips to my links --
- 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){
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();
});
$("a.tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
});
};
It's working great on links that are on the page -- when the page first loads -- so if i have a link like this:
- <a class="tooltip" title="My Link" href="#">Hover</a>
But when i try ot add new links dynamically -- like this:
- $('<div id="new' + myCount + '"><a class="tooltip" title="New Tooltip" href="#"> </a></div>').insertBefore('#new1');
The new link is added to the page -- but i dont know how to update the tooltip function to include the new created dynamic link
If I try to reinitiate the function by calling "tooltip();" again -- it adds the new link, but loses all the old ones.
Can anyone explain how i could re-call the function - to include all the links on the page -- including the new dynamic-created ones.
Thanks so much for the help!