Question

When mousing over certain buttons on my site, I’d like for tooltips to appear that instruct users. Basically, whenever a button with the ‘has_tooltip’ class is moused over, a tooltip is attached.

$('.has_tooltip').live({
    mouseenter  : function(e) {
        if($('#tooltip_container').length > 0){
            $('#tooltip_container').remove();
        }

        var $t = $(this), text = $t.attr('rel'), left = e.pageX-25, top = e.pageY-25;
        if($t.attr('rev') === '1') {
            text += ' <span class="tooltip_warning">You must be <a href="/users/login" class="modal-dynamic">logged in</a> to make use of this.</span>'
        }
        $tooltip = $('<div id="tooltip_container">'+text+'</div>');
        $('body').prepend($tooltip);

        $tooltip.css({
            left: left+'px',
            top: top+'px'
        });

    },

});

And when a user’s cursor leaves the newly created tooltip box, it should disappear

$('#tooltip_container').live({
    mouseleave : function(e){
        $(this).remove();
    }

});

However, a fast moving mouse over a button with the ‘has_tooltip’ class adds the tooltip, but moves too quickly for the mouseleave event to trigger.

Anyone have some tips on how I can fix this?

Answer 1

‘If the mouse does not enter the tooltip (the tooltip appears below the mouse), the browser may not trigger the mouseleave event. You may want to add an additional selector. Try this:

$('#tooltip_container','.has_tooltip').live({
    mouseleave : function(e){
        $('#tooltip_container').remove();
    }
});

I would highly recommend removing the HTML from your tooltip method though… try creating an empty div and add the tooltip text and positioning when you go to show it — try to add as little to the DOM as possible (create a hidden div for most of the tooltip HTML and only change the actual text content of it as necessary).

Ideally, your mouseenter should simply replace the tooltip text and show the div with correct positioning. The mouseleave event should just hide() the tooltip div (not remove it from the DOM just to be created and added again later).