如何使用JavaScript实现点击事件触发Tooltip显示？

没问题！要把 tooltip 改成点击按钮触发显示/隐藏，咱们可以用 JavaScript 监听按钮的点击事件，配合 CSS 类来控制 tooltip 的可见性，这种方式比直接操作 DOM 样式更易维护。下面是具体的实现方案：

HTML #

<div class="tooltip">
  Hover over me 
  <div class="tooltiptext">
    <button id="tooltipBtn">click me</button>
    <span>Tooltip text </span>
  </div>
</div>

我给按钮加了一个唯一的 id="tooltipBtn"，方便 JavaScript 精准选中它。

CSS #

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

/* 用 .active 类替代原来的 hover 触发逻辑 */
.tooltip .tooltiptext.active {
  visibility: visible;
}

这里把原来的 .tooltip:hover .tooltiptext 换成了 .tooltip .tooltiptext.active，以后只需要给 tooltiptext 元素添加/移除这个类，就能控制它的显示和隐藏了。

JavaScript #

// 获取按钮和 tooltip 文本元素
const tooltipBtn = document.getElementById('tooltipBtn');
const tooltipText = document.querySelector('.tooltiptext');

// 监听按钮点击事件，切换 active 类
tooltipBtn.addEventListener('click', (e) => {
  // 阻止事件冒泡，避免触发后面的全局点击事件
  e.stopPropagation();
  tooltipText.classList.toggle('active');
});

// 可选：点击页面其他区域时关闭 tooltip
document.addEventListener('click', (e) => {
  if (!e.target.closest('.tooltip')) {
    tooltipText.classList.remove('active');
  }
});

1. 核心逻辑：通过点击按钮切换 active 类，CSS 负责根据类的存在与否控制 tooltip 的可见性，这种分离的方式让代码更清晰。
2. 事件冒泡阻止：在按钮的点击事件里加上 e.stopPropagation()，是为了避免点击按钮时触发后面的全局点击事件，导致 tooltip 刚显示就被关闭。
3. 全局点击关闭：这是可选功能，如果需要用户点击页面其他地方时自动关闭 tooltip，就保留这段代码；如果只需要点击按钮切换显示/隐藏，可以删掉这部分。

内容的提问来源于stack exchange，提问作者Pranjal Deb