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