仅使用javascript向id添加悬停工具提示

<div id="tooltip">这是一个悬停工具提示</div>

var element = document.getElementById("tooltip");
element.addEventListener("mouseover", showTooltip);
element.addEventListener("mouseout", hideTooltip);

function showTooltip() {
  // 在此处展示悬停工具提示，可以通过创建一个新的元素并设置样式来实现
  // 例如：创建一个提示框元素并设置样式和内容
  var tooltipBox = document.createElement("div");
  tooltipBox.className = "tooltip-box";
  tooltipBox.innerHTML = "这是一个悬停工具提示";
  
  // 将提示框元素添加到页面中
  document.body.appendChild(tooltipBox);
}

function hideTooltip() {
  // 在此处隐藏悬停工具提示，可以通过移除已创建的元素来实现
  // 例如：查找并移除之前创建的提示框元素
  var tooltipBox = document.querySelector(".tooltip-box");
  if (tooltipBox) {
    tooltipBox.parentNode.removeChild(tooltipBox);
  }
}

.tooltip-box {
  position: absolute;
  top: 20px;  /* 调整位置 */
  left: 20px; /* 调整位置 */
  background-color: #ccc; /* 背景颜色 */
  padding: 5px;
  border-radius: 3px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #fff;
}