How to solve this hover out issue

Question

I am trying to apply a hover in and hover out effect on a button and a div will popup above the hovered button. The popup div will disappear if user hover out of the button.

Answer 1

This is how you solve issues with hover on different elements etc :

var timer;

$('.helpImg').on({
    mouseenter: function() {
        clearTimeout(timer);
        $(this).css({'cursor': 'pointer'});
        $('#tool').show(150);
    },
    mouseleave: function() {
        timer = setTimeout(function() {
            $(this).css({'cursor': 'auto'});
            $('#tool').hide(50);
        }, 300);
    }
});

$("#tool").on({
    mouseenter: function() {
        clearTimeout(timer);
    },
    mouseleave: function() {
        $(this).hide(50);
    }
});

FIDDLE

Answer 2

Try:

$('.helpImg').css({'cursor': 'pointer'}).hover(function(){
    $('#tool').show(150);
}, function (){
    $('#tool').not(':visible').hide(50);
});

$('#tool').mouseout(function(){ this.style.display = 'none'; })