jQuery mouseleave for touch screen / tablets

Question

I have a modal box which fades in on mouseenter and fades out on mouseleave. The only problem is when using a touch screen device such as a tablet, I can't get the modal to fadeout once it's showing on the page. Is there any way of modifying this code to where anytime the user touches outside the modal box it will fadeout?

$(".tiptrigger").mouseenter(function() { 

    var s_id = $(this).attr('id'); // There may be more than one per page
    $("#tiptip_holder-"+s_id).fadeIn("fast");   

}); 

$(".tiptrigger").mouseleave(function() { 

    var s_id = $(this).attr('id');
    $("#tiptip_holder-"+s_id).fadeOut("slow");

}); 

Answer 1

You can try using touch events (not tested):

$('.tiptrigger').on('mouseenter touchstart', function(){ 
    var s_id = $(this).attr('id'); // There may be more than one per page
    $("#tiptip_holder-"+s_id).fadeIn("fast"); 
});

$('.tiptrigger').on('mouseleave touchend', function(){
    var s_id = $(this).attr('id');
    $("#tiptip_holder-"+s_id).fadeOut("slow");
});

EDIT

You can try:

$('.tiptrigger').on('mouseenter touchstart', function(e){ 
    var s_id = $(this).attr('id'); // There may be more than one per page
    $("#tiptip_holder-"+s_id).fadeIn("fast"); 
    e.stopPropagation()
});

$('.tiptrigger').on('mouseleave', function(e){
    var s_id = $(this).attr('id');
    $("#tiptip_holder-"+s_id).fadeOut("slow");
});

$('body').on('touchstart', function(e){ 
    $("div[id^='tiptip_holder']").fadeOut("slow");        
});

Answer 2

mouseMouse events (mouseover, mouseout, mousedown, mouseup, mousemove, etc) are specific to the mouse input device. The keyboard has keydown, keypress and keyup. Touch has touchstart, touchmove, touchend and touchcancel. Webkit on the iPhone/iPad/etc has additional gesture start/move/end events that are Apple-specific.

Thus you should be checking for the device on which you are running the app and then handle the code accordingly.