jquery click event

[yashted]

In the following code, the click event is added explicitly to the body, so that even if click outside the button say on the body the div with ID tip1 should close with a fade effect. The problem here is that the the div closes even if we click on the div itself. Any idea on this would help ..

$(document).ready(function(){
            $('.button').getit({speed: 150, delay: 300});
    });

    $.fn.getit = function(options){


    var defaults = {
        speed: 200,
        delay: 300
    };

    var options = $.extend(defaults, options);
    $(this).each(function(){

        var $this = $(this);
        var tip = $('.tip');
        this.title = "";
        var offset = $(this).offset();
        var tLeft = offset.left;
        var tTop = offset.top;
        var tWidth = $this.width();
        var tHeight = $this.height();


    $this.click(

            function() {

            if($('.tip').hasClass('.active101')) {
                $('.tip').fadeOut("slow");
                $('.tip').removeClass('.active101').addClass('.inactive101');

            }
            else {
                setTip(tTop, tLeft);
                $('body').bind('click',function(e) {
                        var parentElement = "button1";
                        var parentElement2 = "tip1"
                        if( e.target.id != parentElement) {
                            $('.tip').fadeOut("slow");
                            $('.tip').removeClass('.active101').addClass('.inactive101');
                        }

                }); 
                $('.tip').removeClass('.inactive101').addClass('.active101');
                setTimer();
            }
            }, 
            function() {
                if($('.tip').hasClass('.inactive101')) {
                stopTimer();
                tip.hide();
                }
            }
    );  

        setTimer = function() {

            $this.showTipTimer = setInterval("showTip()", defaults.delay);

        }

        stopTimer = function() {
            clearInterval($this.showTipTimer);
        }


        setTip = function(top, left){
            var topOffset = tip.height();
            var xTip = (left-440)+"px";
            var yTip = (top-topOffset+100)+"px";
            tip.css({'top' : yTip, 'left' : xTip});
        }

    showTip = function(){
            stopTimer();

            tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);
        }   

    });
};

<div class="main">

        <a href="#" class="button" id="button1">
            Click Me!
        </a>
        <div class="tip" id="tip1">Hello again</div>

</div>

[Luckychap]

You have to handle click on div also. And in that click handler you need to stop event to get Propagating further.

document.getElementById("tip1").onclick = function(e){e.stopPropagation(); return false;};