<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<td title="鼠标停留显示内容1">文字内容1</td>
</tr>
</table><br>
<table border="1">
<tr>
<td onmouseover="overShow()" onmouseout="outHide()">文字内容2</td>
</tr>
</table>
<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>
<div id="showDiv" style="position: absolute; background-color: white; border: 1px solid black;"></div>
<button><span>123</span></button>
<script>
$(function () {
$('button').mousemove(function () {
$(this).attr('title','123')
})
})
</script>
<p title="你最喜欢的水果是。">你最喜欢的水果是?</p>
<ul>
<li title="苹果汁">苹果</li>
<li title="橘子汁" value="123">橘子</li>
<li title="菠萝汁">菠萝</li>
</ul>
<script>
$("ul li").attr("title","不吃橘子");
</script>
</body>
</html>
效果: