1.使用title：如果使用title属性时很方便，但是不灵活

<table border="1">
<tr>
  <td title="鼠标停留显示内容1">文字内容1</td>
</tr>
</table>
2.可以监听鼠标事件onmouseover

<table border="1">
<tr>
  <td>文字内容2</td>
</tr>
</table>
<div id="showDiv" style="position: absolute; background-color: white; border: 1px solid black;"></div>
<script>
function overShow() {
  var showDiv = document.getElementById('showDiv');
  showDiv.style.left = event.clientX;
  showDiv.style.top = event.clientY;
  showDiv.style.display = 'block';
  showDiv.innerHTML = '鼠标停留显示内容2';
}

function outHide() {
  var showDiv = document.getElementById('showDiv');
  showDiv.style.display = 'none';
  showDiv.innerHTML = '';
}
</script>

---------------------
【转载，仅作分享，侵删】
作者：努力_才幸福
原文：https://blog.csdn.net/weixin_38098192/article/details/80475752
版权声明：本文为博主原创文章，转载请附上博文链接！

1.使用title：如果使用title属性时很方便，但是不灵活

<table border="1">
<tr>
  <td title="鼠标停留显示内容1">文字内容1</td>
</tr>
</table>
2.可以监听鼠标事件onmouseover

<table border="1">
<tr>
  <td>文字内容2</td>
</tr>
</table>
<div id="showDiv" style="position: absolute; background-color: white; border: 1px solid black;"></div>
<script>
function overShow() {
  var showDiv = document.getElementById('showDiv');
  showDiv.style.left = event.clientX;
  showDiv.style.top = event.clientY;
  showDiv.style.display = 'block';
  showDiv.innerHTML = '鼠标停留显示内容2';
}

function outHide() {
  var showDiv = document.getElementById('showDiv');
  showDiv.style.display = 'none';
  showDiv.innerHTML = '';
}
</script>

---------------------
【转载，仅作分享，侵删】
作者：努力_才幸福
原文：https://blog.csdn.net/weixin_38098192/article/details/80475752
版权声明：本文为博主原创文章，转载请附上博文链接！