jQuery plugin : monnaTip 0.1

This the simplest tooltip jQuery plugin you can find around.

features:
• takes advantage of live(), mouseenter and mouseleave methods
• tracks mouse movement
• right and bottom viewport border tracking
• can be applied on any element

Demo – download – Google code – GitHub

code

;(function($) {
        var title = '',
            tip = false;
        $.fn.extend({
                monnaTip : function () {
                        tip = $('<p class="tip"></p>').appendTo(document.body);
                        return this.live('mouseenter', function(e){
                                            title = $(this).attr( 'title' );
                                            $(this).attr( 'title', '' );
                                            tip.html( title ).show();
                                            updatetip(e);
                                            $(document.body).bind('mousemove', updatetip);
                                            $(this).mouseleave( function(){
                                                tip.hide().empty().css({top: 0, left: 0} );
                                                $(this).attr( 'title', title );
                                                $(document.body).unbind('mousemove', updatetip);
                                                tip.unbind();

                                            });

                                         });
                 }
        });
        function updatetip(e){
            var s= {},
                x = 10,
                h = tip,
                l = (e.pageX + x),
                t = (e.pageY + x),
                v = {
                        l: $(window).scrollLeft(),
                        t: $(window).scrollTop(),
                        w: $(window).width(),
                        h: $(window).height()
                    };
            h.css({top: t + 'px', left: l + 'px'} );
            s = { w: h.width(), h: h.height() };
            if (v.l + v.w < s.w + l + (x*2)  && l > s.w )
                    h.css({left:  ( l - s.w  - (x*3)  ) + 'px'} );
            if (v.t + v.h < s.h + t + (x*3) && t > s.h)
                    h.css({ top:  ( t - s.h - (x*2) ) + 'px'} );
        }
})(jQuery);