Jquery Vtip plugin working with dynamically created data

Question

I am using the Vtip plugin to show title values in a tooltip when hovered. Everything works fine apart from when I try and use the plugin to display toolips on dynamically created data. I normally get around this using live() function. How can I implement the live() function to their code???

  this.vtip=function(){this.xOffset=-10;this.yOffset=10;$(".vtip").unbind().hover(function(a{this.t=this.title;this.title="";
    this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("body").append('<p id="vtip"><img id="vtipArrow" />'+this.t+"</p>");
    $("p#vtip #vtipArrow").attr("src","images/vtip_arrow.png");
    $("p#vtip").css("top",this.top+"px").css("left",this.left+"px").fadeIn("slow")},function(){this.title=this.t;
    $("p#vtip").fadeOut("slow").remove()}).mousemove(function(a){this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);
    $("p#vtip").css("top",this.top+"px").css("left",this.left+"px")})};
    jQuery(document).ready(function(a){vtip()});

Answer 1

Untested, but should work (jQuery 1.4.x required):

this.vtip = function () {
  this.xOffset = -10;
  this.yOffset = 10;
  $('body').undelegate().delegate('.vTip', 'mouseenter mouseleave mousemove', function(e){
console.log(e.type)
    if(e.type==='mouseover'){

        this.t = this.title;
      this.title = "";
      this.top = (e.pageY + yOffset);
      this.left = (e.pageX + xOffset);
      $("body").append('<p id="vtip"><img id="vtipArrow" />' + this.t + "</p>");
      $("p#vtip #vtipArrow").attr("src", "images/vtip_arrow.png");
      $("p#vtip").css("top", this.top + "px").css("left", this.left + "px").fadeIn("slow")
    }
    if(e.type==='mouseout'){
        this.title = this.t;
      $("p#vtip").fadeOut("slow").remove()
    }
    if(e.type==='mousemove'){
        this.top = (e.pageY + yOffset);
      this.left = (e.pageX + xOffset);
      $("p#vtip").css("top", this.top + "px").css("left", this.left + "px")
    }
  });
}();

EDIT Ok, now should work! Sorry about that.