mouseenter/mouseout makes div flicker

Question

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();
});

score 6 · Accepted Answer · answered Aug 04 '12 at 17:50

6

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();
    });

answered Aug 04 '12 at 17:50

bugwheels94

30,681
3
39
60

I was just noticing that Ankit! I was like, "generally, doesn't a +1 comment come with a +1 upvote?" It's also worth noting that the .hover just calls mouseenter and mouseleave. – D. Patrick Aug 04 '12 at 18:08
i know hover calls mouseenter and leave but it reduce code size – bugwheels94 Aug 04 '12 at 18:10

score 2 · Answer 2 · answered Aug 04 '12 at 18:09

2

You can use the toggle() function for this, it accepts a boolean to set the state, so something like:

$('#home_pic').on('mouseenter mouseleave', function(e) {
    $('#home_tip').toggle(e.type==='mouseenter');
});

FIDDLE

answered Aug 04 '12 at 18:09

adeneo

312,895
29
395
388

I liked this approach. +1 (real one) – Jashwant Aug 04 '12 at 18:11

score 0 · Answer 3 · answered Aug 04 '12 at 17:49

0

Try mouseleave instead of mouseout like this: http://jsfiddle.net/tncbbthositg/dWKfX/

answered Aug 04 '12 at 17:49

D. Patrick

2,894
26
37

defau1t · Answer 4 · 2012-08-04T17:58:45.043

0

You need to write your mouseenter and mouseleave functions in a proper way, something like below:

$('#home_pic').mouseenter(function() {
    $("#home_pic").show();
},mouseleave(function() {
    $("#home_pic").hide();
}));

Note: Code Not tested to work.

edited Aug 04 '12 at 17:58

answered Aug 04 '12 at 17:53

defau1t

10,593
2
35
47

1

$(this) won't refer to the correct div. Notice the hover div is different from the tooltip div. – D. Patrick Aug 04 '12 at 17:55
edited the piece, thats why I make sure to put code not tested. – defau1t Aug 04 '12 at 17:59
1

So,it should still be #home_tip in your code. Also, you're passing the result of the mouseleave function as the handler to mouseenter in this case. I think this is what you're looking for: $('#home_pic').mouseenter(function() { $("#home_tip").show(); }).mouseleave(function() { $("#home_tip").hide(); }); – D. Patrick Aug 04 '12 at 18:04

score 0 · Answer 5 · answered Aug 05 '12 at 21:04

you can also try something like this if the tooltip runs over the home pic - I've used very similar code to pop up bubbles on a image map

$('#research_area').mouseover(function() {
$('img#research').css('display', 'block');
runthis();
});



function runthis () {
if ( $('img#research').css('display') == 'block')  {
$('img#research').mouseleave(function() {
    $(this).css('display', 'none');
    });
}

http://www.karpresources.com/

mouseenter/mouseout makes div flicker

5 Answers5