如何用JavaScript函数为超链接添加动态提示框

最简单的原生方案：利用HTML title 属性 #

浏览器原生支持超链接悬停显示提示，只需要给<a>标签设置title属性即可，完全不需要写复杂的JS事件。

修改你的代码如下：

let link = document.createElement("a");
link.setAttribute("href", `http://mylink.co/${element.key}`);
link.setAttribute("target", "_blank");
link.setAttribute("title", element.description); // 替换成title属性
link.innerHTML = `${element.key}: ${element.summary}`;

这样鼠标悬停在链接上时，会自动弹出包含element.description内容的系统默认提示框，这是最简洁可靠的实现方式。

为什么你之前的写法不对 #

1. setAttribute("onmouseover", element.description)：onmouseover属性需要传入可执行的JS代码字符串，你直接传入描述文本，浏览器会把它当作JS代码执行，必然报错。
2. link.onmouseover = function() { element.description) }：这里有语法错误（多了一个右括号），而且就算语法正确，这个函数只是返回描述文本，没有任何显示提示的逻辑，自然不会有效果。

自定义样式提示框（可选） #

如果需要自定义提示框的样式（比如修改背景、字体、位置），可以通过JS事件手动实现：

let link = document.createElement("a");
link.setAttribute("href", `http://mylink.co/${element.key}`);
link.setAttribute("target", "_blank");
link.innerHTML = `${element.key}: ${element.summary}`;

// 创建自定义提示元素
const tooltip = document.createElement("div");
tooltip.textContent = element.description;
// 设置提示框样式
tooltip.style.cssText = `
  position: absolute;
  background-color: #2d2d2d;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  display: none;
  z-index: 9999;
  white-space: nowrap;
`;
document.body.appendChild(tooltip);

// 鼠标悬停显示提示
link.addEventListener("mouseover", (e) => {
  tooltip.style.display = "block";
  // 定位到鼠标右侧下方
  tooltip.style.left = `${e.clientX + 15}px`;
  tooltip.style.top = `${e.clientY + 15}px`;
});

// 鼠标离开隐藏提示
link.addEventListener("mouseout", () => {
  tooltip.style.display = "none";
});

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