Click as if it were toggle or Hover

Question

I’m having a problem with something similar to a legacy tooltip, what happens is that they did it in Hover this way:

var elem  = jQuery('#interrogacao_adicionar_cartao_div');
jQuery('#tooltip-cartao').hover(
    function() {
        elem.show();
    }, function() {
        elem.hide();
    }
);

It works on mobile he does not disappear, ta is why mobile is touch etc

So I’m changing to be click both desktop and mobile, I saw that there are other simpler ways to do etc, but I can’t change anything just the event that displays and removes due to being in thousands of places and has to work equally between desktop and mobile

So if you click on #tooltip-cartao it displays and if it is already open and click on it or on any other element close

I did it the way below:

var click = jQuery('#tooltip-cartao');
var elem  = jQuery('#interrogacao_adicionar_cartao_div');
var att   = '';

jQuery('#tooltip-cartao , body').click(function(){
    att   = click.data('active');
    if (att === 'disable' && jQuery(this).attr('id') == 'tooltip-cartao') {
        click.attr('data-active','enable');
        elem.show();

    } else if (att === 'enable') {
        click.attr('data-active','disable');            
        elem.hide();                
    }
});

The problem that he ends up catching 2 events at the same time so he is always showing or always closed because I can’t put the 2 events together in just one

Obs: não posso usar toggle por que não funciona em iphone 4 e 5

Answer 1

Instead of using body, better use document which covers the entire HTML, while the body is restricted only to the area where there is content.

The example below shows the concept, so you must adapt to your code:

$(document,'#tooltip-cartao').click(function(e){
  if($("#div").is(":visible")){
      $("#div").hide();
   }else if(e.target.tagName != "HTML"){
      $("#div").show();
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="tooltip-cartao" type="button" value="mostrar DIV" />
<div id="div" style="display: block; width: 100px; height: 100px; background: yellow; display: none; padding: 10px;">
   Olá! Clique em qualquer lugar para fechar
</div>