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;
}