如何实现pointer-events:none下tooltip正常显示并规避输入框hover？

问题根源 #

你给<label>加了pointer-events:none，这直接废掉了整个标签里所有元素的鼠标交互——问号没法触发hover显示tooltip，连label关联输入框的点击聚焦功能也失效了，完全和你的需求背道而驰。

修正代码 #

先改HTML（去掉label上的无效样式） #

<label for="email_for_confirmation" class="form-label">
  Email Address 
  <span class="form-label-tooltip">
    <i class="fa fa-question-circle-o"></i>
    <span class="tooltip-msg">We will send your order confirmation here.</span>
  </span>
</label>

用CSS实现tooltip+事件隔离 #

/* 默认隐藏提示框 */
.form-label-tooltip .tooltip-msg {
  display: none;
  position: absolute;
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  top: 100%;
  left: 0;
  margin-top: 6px;
  z-index: 100;
}

/* 悬停问号时显示提示框 */
.form-label-tooltip:hover .tooltip-msg {
  display: block;
}

/* 给提示框容器设相对定位，让提示框对齐它 */
.form-label-tooltip {
  position: relative;
  cursor: help;
  /* 确保这个容器能独立响应鼠标事件 */
  pointer-events: auto;
}

点击问号时阻止触发输入框交互（可选JS） #

如果单纯CSS还不够，加一段JS彻底阻止事件冒泡：

const tooltipEl = document.querySelector('.form-label-tooltip');
tooltipEl.addEventListener('click', function(e) {
  // 阻止事件传到label，避免触发输入框的hover/聚焦
  e.stopPropagation();
  // 如果你需要点击后给问号图标设pointer-events:none，这里加：
  this.querySelector('i').style.pointerEvents = 'none';
  // 可选：比如5秒后恢复图标交互
  setTimeout(() => {
    this.querySelector('i').style.pointerEvents = 'auto';
  }, 5000);
});

核心要点 #

1. 绝对不能给整个label加pointer-events:none，否则所有交互都失效。
2. 用CSS hover实现tooltip最简洁，不需要复杂JS。
3. 通过事件冒泡阻止，让点击问号的操作不会传递到label，也就不会触发输入框的hover效果。
4. 如果需要点击后禁用问号的交互，用JS动态设置pointer-events:none即可。

内容的提问来源于stack exchange，提问作者Goldy-566