ToolTip 通过Js实现代替超链接中的title效果

介绍一下如何用JS实现ToolTip代替超链接中的title效果：

1. 理解ToolTip

ToolTip 是一种在鼠标移动到某个元素上时（通常为超链接）出现的提示信息。通常很多网站会在链接上添加title属性，这个属性值即为ToolTip中的文本。然而，title属性的提示框样式是完全受操作系统控制的，不能自定义样式，且无法加入图片、超链接等内容。因此，我们需要使用JS来自己实现ToolTip。

2. 创建ToolTip的HTML元素

在页面中创建一个空白的div元素，来承载ToolTip的内容，设置好样式和位置，但是默认是隐藏的：

<div id="tooltip" style="display:none;position:absolute;background-color:white;border:1px solid gray;padding:5px;"></div>

3. 设置超链接的数据

在超链接的HTML元素中添加自定义的data-tooltip属性，将ToolTip的内容设置为该属性的值：

<a href="#" data-tooltip="这里是ToolTip的内容">超链接</a>

4. 编写JS代码

通过JS来实现当鼠标移动到超链接时显示ToolTip：

let links = document.querySelectorAll('a[data-tooltip]');
for (let i = 0; i < links.length; i++) {
  links[i].addEventListener('mouseover', function(e) {
    // 获取超链接中data-tooltip中的内容
    let tooltip = e.target.getAttribute('data-tooltip');
    // 获取ToolTop的div元素
    let tooltipElm = document.getElementById('tooltip');
    // 设置ToolTop div元素的文本内容，并设置样式
    tooltipElm.innerHTML = tooltip;
    tooltipElm.style.display = 'block';
    tooltipElm.style.left = e.pageX + 'px';
    tooltipElm.style.top = e.pageY + 'px';
  });
  links[i].addEventListener('mouseout', function(e) {
    // 隐藏ToolTip
    document.getElementById('tooltip').style.display = 'none';
  });
}

5. 示例说明

示例一：Tooltip显示图片

我们可以将Tooltip的内容设置为HTML元素，因此可以通过在data-tooltip属性中添加HTML标签，来在Tooltip中引入图片。

<a href="#" data-tooltip="<img src='https://picsum.photos/200/300' alt='这是一张图片'>">超链接</a>

这样当鼠标移动到超链接时，将会显示一张图片。

示例二：Tooltip显示超链接

我们也可以在Tooltip中添加超链接，将链接的地址设置为data-tooltip属性的值，在JS代码中用a标签包裹即可。

<a href="#" data-tooltip="这是一个<a href='#'>链接</a>，点击可以跳转到其他页面">超链接</a>

这样当鼠标移动到超链接时，将会显示一个链接，点击可以跳转到其他页面。

这就是用JS来实现Tooltip代替超链接中的title效果的攻略。