Question

I have the following jQuery code,

 setTips: function() {
            $(".tooltip").parent().hover(function(){
            //store the tooltip being hovered
            TT.current = $(this);
            TT.timer = setTimeout(function(){
                //find the tooltip
                TT.current.find(".tooltip").fadeIn('fast');
                }, TT.delay);
            }, function(){
                //on mouseout, clear timer and hide tooltip
                clearTimeout(TT.timer);
                $(this).find(".tooltip").fadeOut('fast');

Which works well on an browser, however on the iphone, whenever the tooltip appears, there’s no way to hide it.

Is there a way to tap outside of the span and have it fade out? Thank you!

Answer 1

How about a generic click event that hides tooltips on any tap, such as this?

$('body').on('click', function(e) {
    if ( $(e.target).hasClass('.element-that-called-tooltip') ) return; // return if the tapped element was one that called the tooltip
    $('.tooltip').fadeOut('fast');
});

EDIT:

So the problem was with iOS hover events. I’d say the best way to mitigate this is to use feature detection (with a library like Modernizr), and bind hover events for non-touch devices, and click events for touch devices.

jsFiddle: http://jsfiddle.net/RAJ5Q/1/

if ( $('html').hasClass('no-touch') ) {
    // bind to hover
}
else {
    // bind to click
}