Search code examples
javascriptjquerytooltipmouseentermouseout

mouseenter/mouseout makes div flicker

I have a tooltip that shows on the mouseenter event and hides on the mouseout event. Sometimes, not always, when the mouse moves within the image for the tooltip the tooltip flickers. How can i prevent this happening? Is there a better way to do this?

Here is my code:

$('#home_pic').mouseenter(function() {
    $('#home_tip').show();
});
$('#home_pic').mouseout(function() {
    $('#home_tip').hide();
});
Solution

  • Use mouseleave instead of mouseout()

    $('#home_pic').mouseleave(function() {
    $('#home_tip').hide();
});

    Or use .hover

     $('#home_pic').hover(function() {
        $('#home_tip').hide();
    },function() {
        $('#home_tip').show();
    });