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