What's going on with my JS

gistfile1.txt

So I've got this code

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

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

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

I'm using touchstart here as iOS doesn't seem to wanna work without it.

unfortunately

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

when tapping it invokes the form elements underneath the tooltip that's showing

doing this

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

fixes this but it seems to hijack the page for any other click events.

Any ideas ?

do this

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

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

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

and put

pointer: cursor; on the body

Try using preventDefault rather than return false like so:

$tooltips.on("click touchstart", function (e) {
  e.preventDefault();
  // Rest of your code (excluding return false)
});

You should also turn the main body event off when the tooltip isn't open to prevent the click-jacking:

var removeEvent = function (e) {
$tooltips.removeClass('js-opened');
$('body').off('click', removeEvent);
}

$tooltips.on('click touchstart', function(e){
   e.preventDefault();
    var tooltip = $(this);
    tooltip.toggleClass('js-opened');
    $('body').on('click', removeEvent);
  });