如何通过按同一个按钮使工具提示出现和消失

Question

我试图通过单击同一个按钮来使我的工具提示出现和消失。就像我想点击共享图标，所以工具提示出现，第二次点击它，工具提示消失，页面回到之前的状态。我尝试了很多方法，但还是不行。

我尝试过清除之前的状态，或者使用removeEventListener。我不确定如何在同一个按钮上使用相同的事件监听器执行两个不同的功能。

===

const profile = document.getElementById("profile_info_js"); 
const shareBtn = document.getElementById("arrow-icon"); shareBtn.addEventListener ('click', socialMedias); 
function socialMedias() { 
  if (document.documentElement.clientWidth > 1000) { 
    document.getElementById("tooltip").style.visibility = "visible"; 
    document.getElementById("arrow-icon").style.color = "white"; 
    document.getElementById("arrow-icon").style.backgroundColor = "var(--DesaturatedDarkBlue)"; 
  }
}

Answer 1

这里是如何执行此操作的示例代码。在此示例中，我正在更改背景颜色。要显示/隐藏工具提示，您需要更改 css

display

（如果工具提示是单独的元素）或 element.title（如果不是）

document.querySelector("button").addEventListener("click",
function(e) {
  document.querySelector("P").classList.toggle("foo");
});

.foo {
  background: blue;
}

<p>Test</p>
<button type="button">Change</button>