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

code

  1.  
  2. ;(function($) {
  3.         var title = ”,
  4.             tip = false;
  5.         $.fn.extend({
  6.                 monnaTip : function () {
  7.                         tip = $('<p class="tip"></p>').appendTo(document.body);
  8.                         return this.live('mouseenter', function(e){
  9.                                             title = $(this).attr( 'title' );
  10.                                             $(this).attr( 'title', ” );
  11.                                             tip.html( title ).show();
  12.                                             updatetip(e);
  13.                                             $(document.body).bind('mousemove', updatetip);
  14.                                             $(this).mouseleave( function(){
  15.                                                 tip.hide().empty().css({top: 0, left: 0} );
  16.                                                 $(this).attr( 'title', title );
  17.                                                 $(document.body).unbind('mousemove', updatetip);
  18.                                                 tip.unbind();
  19.  
  20.                                             });
  21.  
  22.                                          });
  23.                  }
  24.         });
  25.         function updatetip(e){
  26.             var s= {},
  27.                 x = 10,
  28.                 h = tip,
  29.                 l = (e.pageX + x),
  30.                 t = (e.pageY + x),
  31.                 v = {
  32.                         l: $(window).scrollLeft(),
  33.                         t: $(window).scrollTop(),
  34.                         w: $(window).width(),
  35.                         h: $(window).height()
  36.                     };
  37.             h.css({top: t + 'px', left: l + 'px'} );
  38.             s = { w: h.width(), h: h.height() };
  39.             if (v.l + v.w < s.w + l + (x*2)  && l > s.w )
  40.                     h.css({left:  ( l - s.w  - (x*3)  ) + 'px'} );
  41.             if (v.t + v.h < s.h + t + (x*3) && t > s.h)
  42.                     h.css({ top:  ( t - s.h - (x*2) ) + 'px'} );
  43.         }
  44. })(jQuery);
  45.  

Tags :

This entry was posted on Thursday, February 25th, 2010 at 8:37 am and is filed under Blog, Programs, Solutions. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

8 Responses to “jQuery plugin : monnaTip 0.1”

  1. Shady Says:
    February 25th, 2010 at 10:08 am

    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 ;)

  2. wkarim Says:
    February 25th, 2010 at 10:14 am

    thx shady!!

  3. Mahmoud M. Abdel-Fattah Says:
    February 26th, 2010 at 7:35 pm

    what about fade effect ?

  4. wkarim Says:
    February 26th, 2010 at 7:58 pm

    @mody
    to be considered!

  5. Anonymous Says:
    April 11th, 2010 at 3:29 am

    ilove

  6. Emad Says:
    May 5th, 2010 at 12:03 pm

    Great work!

    keep it up :)

  7. campana Says:
    May 11th, 2010 at 9:10 am

    please release it under mit
    plz plz plz

  8. wkarim Says:
    May 11th, 2010 at 9:26 am

    @campana
    what’s different about MIT license ?

 

Leave a Reply


 Top