Click as if it were toggle or hover

Question

Click as if it were toggle or hover

Navigation

#1 by (1 votes)

0

I have a problem with something similar to a legacy tooltip, what happens is that they did in hover this way:

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

It works however on mobile it does not add up, ta is why mobile is touch etc.

So I'm changing so it's both desktop and mobile click, I've seen it has other simpler ways to do it etc, but I can not change anything just the event it displays and removes due to being in thousands of places and has that work equally between desktop and mobile

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

I did the following:

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 it ends up getting 2 events at the same time so it always shows or always closed because I can not join the 2 events in just one

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

jquery onclick click

asked by anonymous 22.11.2017 / 19:54

1 answer

How to make the project Laravel see the axios file? List 2 Tables in a Oriented Object

score 1 · Accepted Answer

Instead of using body , it's best to use document that covers all HTML, while body is restricted to only the area where content is.

The example below shows the concept, so you should adapt it 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><inputid="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>