jquery did my first plugin - Issue with fadeIn/fadeOut when it goes too fast
<p>I made my own little tooltip, but there seems to be an issue when I go too fast.</p>

<p>It's a simple tooltip, ie you mouseenter and it shows you a bubble that fadeIn on top with some text, mouseleave the bubble fadeOut. </p>

<p>The issue appears when go very fast mouseenter/mouseleave on several different elements ... first it starts to only fade to like 0.6 and then eventually it doesn't show.</p>

<p>I'm guessing it s something to do with queuing. So I tried stop() and clearqueue() but it still doesn't work. </p>

<p>Here is the plugin:</p>

<pre><code>(function ($) {


    $.fn.tooltip = function (options) {

        var selector = $(this).selector;
        var defaults = {
            fadeInSpeed:350,
            fadeOutSpeed:200,
            delayIn: 350,
            delayOut: 300,
            popupId:'tooltip_popup',
            verticalOffset: 30
        };
        var settings = $.extend({}, defaults, options);

        $(document).delegate(selector, 'mouseenter', function (e) {
            var $this = $(this);
            var title = $this.attr('title');
            $this.attr('title', '');


            if (title !== '') {
                if ($('#' + settings.popupId).text() === '') {
                    $('&lt;div /&gt;').attr('id', settings.popupId)
                        .appendTo('body')
                        .css({
                            position:'absolute',
                            backgroudColor: 'black',
                            zIndex: 5
                        })
                        .addClass('tooltip_style')
                        .hide();
                    $('&lt;div /&gt;').appendTo('#' + settings.popupId).addClass('tooltip_arrow');
                    $('&lt;span /&gt;').appendTo('#' + settings.popupId);
                } else {
                    $('#' + settings.popupId).hide().stop().clearQueue().hide();
                }

                var ele_x = $this.offset().left;
                var ele_y = $this.offset().top;

                $('#' + settings.popupId+' span').text(title);

                $('#' + settings.popupId)
                    .css({
                        top : ele_y - settings.verticalOffset,
                        left: ele_x
                    })
                    .delay(settings.delayIn)
                    .fadeIn(settings.fadeInSpeed);
            }

        });

        $(document).delegate(selector, 'mouseleave', function (e) {
            var $this = $(this);

            $('#' + settings.popupId)
                .delay(settings.delayOut)
                .fadeOut(settings.fadeOutSpeed);
            $this.attr('title', $('#' + settings.popupId+' span').text() );

        });

        return this;
    }


})(jQuery);
</code></pre>

<p>As you'll probably notice, I think this line is the one I need fixing:</p>

<pre><code>$('#' + settings.popupId).hide().stop().clearQueue().hide();
</code></pre>

<p>(it s a bit messy cause I was trying everything...ha).</p>

<p>I don't think I quite understand this queueing thing.</p>

<p>Here is a fiddle: <a href="http://jsfiddle.net/denislexic/7YMcu/2/" rel="nofollow">http://jsfiddle.net/denislexic/7YMcu/2/</a></p>

<p>Thanks for any help.</p>
