jquery close outside div not working on iOS but is on Android

Question

I've got this little bit of JS

var $tooltips = $('.tooltip__link');

// tooltip/overlay toggle
$tooltips.on('click', function(){
  var tooltip = $(this);
  tooltip.toggleClass('js-opened');
  return false;
});

// remove tooltip if clicked anywhere else
// only works on 'desktop'
$('body').on('click', function() {
  $tooltips.removeClass('js-opened');
});

which indeed removes the class 'js-opened' on desktop browsers and indeed on Android 4+ when clicking outside the element, but fails completely to work on iOS(7) and Android 2.3

Anyone know why this code would do that?

Answer 1

You need to use touchstart:

$tooltips.on('click touchstart', function(){
  var tooltip = $(this);
  tooltip.toggleClass('js-opened');
  return false;
});

$('body').on('click touchstart', function(){
    $tooltips.removeClass('js-opened');
});

If this don't work try to add cursor: pointer to your elements. It's kind of a workaround for iOS.