1

Estou aprendendo a fazer tooltips, inclusive joguei umas dúvidas anteriores aqui no SO, mas acabou me surgindo uma nova dúvida; Quando eu clicar fora do elemento que tem a tooltip, ele poderia fechar a tooltip, como posso fazer isso?

Código atual:

HTML

<div class="banner-tooltips" id="banner-tooltips">
    <span id="primeira-tooltip">1°</span>
    <span id="segunda-tooltip">2°</span>
    <span id="terceira-tooltip">3°</span>
    <span id="quarta-tooltip">4°</span>
</div>

JS

//Tooltips
function tooltips(){
    var caixaTooltips=document.getElementById("banner-tooltips");
    var tooltips=caixaTooltips.querySelectorAll("span");
    for(var i=0;i<tooltips.length;i++){
        tooltips[i].addEventListener("click",function(){
            var anterior=document.getElementsByClassName("banner-tooltip-active");
            if(anterior.length){
                for(var i=0;i<anterior.length;i++){
                    anterior[i].classList.remove("banner-tooltip-active");
                }
            }
            this.classList.add("banner-tooltip-active");
        });
    }
}
tooltips();
//\.Tooltips

1 Resposta 1

2

Você pode usar a propriedade target no click do documento:

window.addEventListener('click', function(e) {
    if (!document.getElementById('banner-tooltips').contains(e.target)) {
        var anterior = document.getElementsByClassName("banner-tooltip-active");
        if (anterior.length) {
            for (var i = 0; i < anterior.length; i++) {
                anterior[i].classList.remove("banner-tooltip-active");
            }
        }
    }
});
2
  • Editei a resposta @MuriloGambôa, veja dessa forma.
    – BrTkCa
    Commented 22/03/2017 às 13:06
  • 1
    perfeito :D muito obrigado denovo man Commented 22/03/2017 às 13:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .