ignore Mouseout event from child element of Mouseover element

Question

I need to display a tooltip for an image on mouseover. I wrote the following code for that. My current issue is that when I put the image into the tooltip div, the event occurs only for the image element. How can I ignore the mouseover and mouseout event from child element of my parent tooltip div?

$("document").ready(function() {
        $('.tooltip').mouseover(function(e){
            var id = $(this).siblings('.tooltip-c').attr('id');
            $('.tp'+id).fadeIn(500);
            $('.tp'+id ).mouseout(function(event){
                $('.tp'+id).fadeOut(300);
            });
        });
    });

Please help-out me guys. I'm helpless.

Answer 1

Try using .mouseenter() and .mouseleave() instead. They handle event bubbling differently from .mouseover() and .mouseout(). I think it should solve your problem:

$("document").ready(function() {
  $('.tooltip').mouseenter(function(e){
    var id = $(this).siblings('.tooltip-c').attr('id');
    $('.tp'+id).fadeIn(500);
    $('.tp'+id ).mouseleave(function(event){
      $('.tp'+id).fadeOut(300);
    });
  });
});