can we use of $this in closure for jquery plugin

Question

I tried creating a quick tooltip plugin using the jquery and jquery ui position. Is the way I have used the enclosure are right and is the use of position right since in ff it seem to have some memory problem..it remembers the previous position when I refresh the page after the first time. below is the code

This need the latest jquery & jquery ui

  $.fn.tooltip = function(options) {
            var defaults = {
                my : "left center",
                at : "right top",
                collision : "none",
                offset : "0 0"
            }

            var options = $.extend(defaults, options);

            return this.each(function() {
                var $this = $(this);
                var tip = $("<span class='tooltip'>" + $this.attr('tooltip') + "</span>");
                tip.css({
                    width : options.width
                });
                $this.after(tip);
                tip.position({
                    my : options.my,
                    at : options.at,
                    of : $this,
                    collision : options.collision,
                    offset : options.offset
                });

                $this.add(tip).hover(function() {
                    var timeoutId = $this.data('timeoutId');
                    if(timeoutId) {
                        clearTimeout(timeoutId);
                    }
                    tip.fadeIn("slow");

                }, function() {
                    var timeoutId = setTimeout(function() {
                        tip.fadeOut("slow");
                    }, 650);
                    $this.data('timeoutId', timeoutId);
                });
            });
        };
        $(function() {
            $('#input1').tooltip();
            $('#input2').tooltip();
        });

css style

        .tooltip {
            display: none;
            position: absolute;
            background-color: #ffaa5e;/* #F5F5B5; */
            border: 1px solid #DECA7E;
            color: #303030;
            font-family: sans-serif;
            font-size: 12px;
            line-height: 18px;
            padding: 10px 13px;
            position: absolute;
            text-align: center;
            top: 0;
            left: 0;
            z-index: 3;
        }

html code to test this

http://jsfiddle.net/HE8QN/

thanks

Answer 1

Try this type of closure

    $this.add(tip).hover(function() {
        return function() {
            var timeoutId = $this.data('timeoutId');
            if(timeoutId) {
                clearTimeout(timeoutId);
            }
            tip.fadeIn("slow");
        };

    }(), function() {
        return function() {
            var timeoutId = setTimeout(function() {
                tip.fadeOut("slow");
            }, 650);
            $this.data('timeoutId', timeoutId);
        };
    }());

Just dont forget to tell if it solves the problem. Good luck.