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


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
February 25th, 2010 at 10:14 am
thx shady!!
February 26th, 2010 at 7:35 pm
what about fade effect ?
February 26th, 2010 at 7:58 pm
@mody
to be considered!
April 11th, 2010 at 3:29 am
ilove
May 5th, 2010 at 12:03 pm
Great work!
keep it up
May 11th, 2010 at 9:10 am
please release it under mit
plz plz plz
May 11th, 2010 at 9:26 am
@campana
what’s different about MIT license ?