如何用纯JavaScript实现悬停时显示外部Tooltip（基于类选择器）

完全可以用纯JavaScript实现需求，下面是基于类选择器的完整实现方案：

最终HTML结构（默认不包含tooltip） #

<div class="icons">
  <div class="icon-wrapper" data-label="Delete">Icon Image</div>
  <div class="icon-wrapper" data-label="User">Icon Image</div>
  <div class="icon-wrapper" data-label="Edit">Icon Image</div>
  <div class="icon-wrapper" data-label="Checkbox">Icon Image</div>
  <div class="icon-wrapper" data-label="Settings">Icon Image</div>
</div>

CSS样式（美化提示框并实现定位） #

.icon-wrapper {
  position: relative;
  display: inline-block;
  margin: 10px;
  padding: 8px;
  border: 1px solid #eee;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  padding: 6px 12px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 100;
}

/* 可选：给提示框加小三角 */
.tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #333;
}

JavaScript逻辑（动态创建/移除提示框） #

// 获取所有.icon-wrapper元素
const iconWrappers = document.querySelectorAll('.icon-wrapper');

// 遍历每个图标容器，绑定事件
iconWrappers.forEach(wrapper => {
  // 鼠标进入时创建提示框
  wrapper.addEventListener('mouseenter', () => {
    // 创建tooltip元素
    const tooltip = document.createElement('div');
    tooltip.className = 'tooltip';
    // 设置提示文本为data-label的值
    tooltip.textContent = wrapper.dataset.label;
    // 将提示框插入到当前图标容器的外部（同级位置）
    wrapper.parentNode.insertBefore(tooltip, wrapper.nextSibling);
    // 给当前容器标记对应的tooltip，方便移除
    wrapper._tooltip = tooltip;
  });

  // 鼠标离开时移除提示框
  wrapper.addEventListener('mouseleave', () => {
    if (wrapper._tooltip) {
      wrapper._tooltip.remove();
      delete wrapper._tooltip;
    }
  });
});

关键说明 #

• 利用document.querySelectorAll('.icon-wrapper')批量获取所有目标元素，符合类选择器的需求
• 提示框通过document.createElement动态创建，默认不会出现在HTML结构中
• 使用parentNode.insertBefore将提示框插入到图标容器的外部（同级位置）
• 鼠标离开时通过remove()方法销毁提示框，避免DOM冗余
• 通过给图标容器添加_tooltip属性，快速关联对应的提示框，确保移除的准确性

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