Topics

jQuery plugin : monnaTip 0.1

This the simplest jQuery you can find around.

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

DemodownloadGoogle codeGitHub

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

                                            });

                                         });
                 }
        });
        function updatetip(e){
             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);
  • Good work!

    It’s a good idea to make use of .live() function, it’d help lots of people ..

    keep up the good work bro 😉

  • thx shady!!

  • what about fade effect ?

  • @mody
    to be considered!

  • Anonymous

    ilove

  • Great work!

    keep it up 🙂

  • please release it under mit
    plz plz plz

  • @campana
    what’s different about MIT license ?

  • Great work, thx shady!!
    It’s save my job!

  • Vincent

    Great plugin, I was looking for a possibility to have a “live” tooltip from ajax loaded content and it did it.

    Thank you very much!

  • I’ve found alternative solution using standard tooltip pligin
    [code]
    $(document).ajaxComplete(function()
    {
    $(‘.tooltippable).tooltip();
    }
    [/code]

    Hope it helps. Your plugin is hardcoded, there is no option to change behavior using custom options.

  • Alex

    Good job. jQuery UI tooltip suxx. 🙂

  • Sean

    For some reason the following line is creating a small black circle at the top left of my document …how do i fix this?

    tip = $(”).appendTo(document.body);

  • Pingback: Nginx Error Log Reader :: GadElKareem()

  • Juan Res

    Thanks, that was a great help.