如何用JavaScript为通过DOM获取的元素添加Tooltip？

我想给页面添加标准的HTML/CSS提示框（Tooltip），原本的实现代码如下：

<style>
/* Tooltip 容器 */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* 给可 hover 的文本添加下划线圆点 */
}

/* Tooltip 文本 */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* 定位提示文本 - 可参考下方示例调整 */
  position: absolute;
  z-index: 1;
}

/* 鼠标悬停容器时显示提示文本 */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div> 

但需要添加提示框的元素是第三方库生成的，无法直接修改其HTML来添加tooltip类，不过我能通过DOM查询到该元素的标识。请问如何给这个通过DOM获取到的元素添加提示框？

我曾尝试创建上述示例中的span元素并作为子元素添加到目标元素中，但未成功。我在HTML中写了一个独立的提示文本元素：

<span class="tooltiptext" id="tooltiptext">Tooltip text</span>

随后编写了如下JavaScript代码：

var tooltiptext = document.getElementById("tooltiptext");
tooltiptext.id  = "newId"; // 参考另一篇StackOverflow回答这么做的
var anchor = document.getElementsByClassName("tooltipTarget")[0]; // 调试确认已获取到正确元素
anchor.appendChild(tooltiptext); 
anchor.classList.add("tooltip");

核心问题排查与修复 #

1. 确保目标元素已完成渲染
   第三方库生成的元素往往会在页面初始DOM加载后才插入，若JS代码执行过早，会出现获取不到元素的情况。可以通过以下方式确保代码在元素存在后执行：

// 等待DOM完全加载
document.addEventListener('DOMContentLoaded', function() {
  // 延迟执行，给第三方库留足渲染时间（调试用，正式环境建议用MutationObserver）
  setTimeout(initTooltip, 1000);
});

// 更可靠的方式：用MutationObserver监听DOM变化，目标元素出现时触发
function initTooltip() {
  const observer = new MutationObserver((mutations) => {
    const target = document.querySelector('.tooltipTarget');
    if (target) {
      observer.disconnect(); // 找到元素后停止监听
      attachTooltip(target);
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });
}

2. 正确挂载提示框元素
   若目标元素允许添加子元素，可直接创建提示框并挂载；若目标是<img>这类无法包含子元素的标签，需用容器包裹后再添加提示框：

function attachTooltip(targetElement) {
  // 情况1：目标元素可添加子元素
  if (!['IMG', 'INPUT', 'BR'].includes(targetElement.tagName)) {
    targetElement.classList.add('tooltip');
    const tooltipText = document.createElement('span');
    tooltipText.className = 'tooltiptext';
    tooltipText.textContent = '自定义提示文本';
    targetElement.appendChild(tooltipText);
    return;
  }

  // 情况2：目标元素无法添加子元素，用容器包裹
  const wrapper = document.createElement('div');
  wrapper.classList.add('tooltip');
  targetElement.parentNode.insertBefore(wrapper, targetElement);
  wrapper.appendChild(targetElement);

  const tooltipText = document.createElement('span');
  tooltipText.className = 'tooltiptext';
  tooltipText.textContent = '自定义提示文本';
  wrapper.appendChild(tooltipText);
}

3. 优化提示框定位与显示效果
   默认样式可能导致提示框位置不合理，可补充CSS调整定位并添加过渡动画：

.tooltip .tooltiptext {
  /* 原有样式 */
  bottom: 125%; /* 悬浮在元素上方 */
  left: 50%;
  margin-left: -60px; /* 宽度的一半，实现居中 */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

4. 简化原有代码
   修改元素ID的操作并非必要，若页面无重复ID冲突，可直接复用已有提示框元素：

function reuseExistingTooltip() {
  const tooltipText = document.getElementById('tooltiptext');
  const target = document.querySelector('.tooltipTarget');
  if (!tooltipText || !target) return;

  target.classList.add('tooltip');
  target.appendChild(tooltipText);
  // 可选：移除原ID避免后续冲突
  tooltipText.removeAttribute('id');
}

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