2023-03-29T14:46:12.png

html

<br/>
<a href="链接" title="悬停时显示这个内容">测试</a>

js

 const links = document.querySelectorAll('a'); // 获取所有超链接

  links.forEach(link => {
    link.addEventListener('mouseover', () => {
      const tooltip = document.createElement('div'); // 创建一个新的<div>元素
      tooltip.textContent = link.getAttribute('title'); // 获取title属性的值并将其设置为<div>元素的文本内容
      tooltip.classList.add('tooltip'); // 添加CSS样式
      document.body.appendChild(tooltip); // 将<div>元素添加到页面中
    });

    link.addEventListener('mouseout', () => {
      const tooltips = document.querySelectorAll('.tooltip');
      tooltips.forEach(tooltip => tooltip.remove()); // 鼠标移出时删除<div>元素
    });
  });

css

 .tooltip {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    font-size: 14px;
  }