Jquery Vtip plugin working with dynamically created data

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").att开发者_开发知识库r("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()});

I rewrote the vtip function as a jQuery plugin, to be chainable, to allow custom settings, and to work with live elements. Its using a mapping of events, so it will work with jQuery 1.4.3 and up. Enjoy.

(function ($) {
$.fn.vtip = function (options) {

    var settings = {
        xOffset: -10,
        yOffset: 6,
        arrow: '/images/vtip_arrow.png'
    };
    if (options) $.extend(settings, options);

    return this.live({
        mouseenter: function (a) {
            this.t = this.title;
            this.title = "";
            this.top = (a.pageY + settings.yOffset);
            this.left = (a.pageX + settings.xOffset);
            $("body").append('<p id="vtip"><img id="vtipArrow" />' + this.t + "</p>");
            $("p#vtip #vtipArrow").attr("src", settings.arrow);
            $("p#vtip").css("top", this.top + "px").css("left", this.left + "px").fadeIn("fast");
        },
        mouseleave: function (a) {
            this.title = this.t;
            $("p#vtip").fadeOut("fast").remove();
        },
        mousemove: function (a) {
            this.top = (a.pageY + settings.yOffset);
            this.left = (a.pageX + settings.xOffset);
            $("p#vtip").css("top", this.top + "px").css("left", this.left + "px");
        }
    });
};
})(jQuery);

// You can use it with any class, I'm using the class 'vtip' below.
$(document).ready(function(){
    $('.vtip').vtip();
});

// If necessary, add custom settings like so:
$('.vtip').vtip({xOffset:-10,yOffset:10,arrow:'/images/customArrow.png'});

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.