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 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | ;(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); |
