Question

I made my own little tooltip, but there seems to be an issue when I go too fast.

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.

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.

I’m guessing it s something to do with queuing. So I tried stop() and clearqueue() but it still doesn’t work.

Here is the plugin:

(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() === '') {
                    $('<div />').attr('id', settings.popupId)
                        .appendTo('body')
                        .css({
                            position:'absolute',
                            backgroudColor: 'black',
                            zIndex: 5
                        })
                        .addClass('tooltip_style')
                        .hide();
                    $('<div />').appendTo('#' + settings.popupId).addClass('tooltip_arrow');
                    $('<span />').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);

As you’ll probably notice, I think this line is the one I need fixing:

$('#' + settings.popupId).hide().stop().clearQueue().hide();

(it s a bit messy cause I was trying everything…ha).

I don’t think I quite understand this queueing thing.

Here is a fiddle: http://jsfiddle.net/denislexic/7YMcu/2/

Thanks for any help.

Answer 1

try using stop(true, true) instead of stop().

From the jQuery docs:

.stop( [clearQueue] [, jumpToEnd] )

clearQueue Boolean indicating whether to remove queued animation as well. Defaults to false.

jumpToEnd Boolean indicating whether to complete the current animation immediately. Defaults to false.

With clearQueue set to true, you can also take out the clearQueue() call.

Explanation

The reason you’re having issues is that when you stop an animation, you leave the element in a half-transitioned state, which the next animation considers to be the "normal" state. If you tell a half-visible element to fadeOut, it’s going to save the 50% visible state for when it is told to fadeIn later. If you tell stop to jumpToEnd, it will always finish at 0% or 100% visibility.

As for clearQueue, I’m not confident that it needs to be true. jumpToEnd is the important thing here. You can play with the clearQueue value and see what works best in your case.