Gihan Dilusha Gihan Dilusha - 5 months ago 27
jQuery Question

ignore Mouseout event from child element of Mouseover element

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

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