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

You can use the event .stopPropagation() method in the event handler function.

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