(function ($) {
$.fn.vtip = function (options) {

    var settings = {
        xOffset: -10,
        yOffset: 20,
        arrow: 'http://www.rockhayat.com/plugins/jquery.vtip/vtip_arrow.png'
    };
    if (options) $.extend(settings, options);

    this.die();
    
    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'});
