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

Recommended posts:


Tags : more-57

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.

  • http://blog.gr80.net Shady

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

  • http://gadelkareem.com wkarim

    thx shady!!

  • http://mahmoud.abdel-fattah.net Mahmoud M. Abdel-Fattah

    what about fade effect ?

  • http://gadelkareem.com wkarim

    @mody
    to be considered!

  • Anonymous

    ilove

  • http://www.lifetimedev.com Emad

    Great work!

    keep it up :)

  • http://softpedia.com campana

    please release it under mit
    plz plz plz

  • http://gadelkareem.com wkarim

    @campana
    what’s different about MIT license ?

  • http://www.zira.com.br Thiago

    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!

  • http://ayeo.pl ayeo

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


 Top