Copy the code code as follows:
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script>
/*Text prompt*/
/*
(1) When the mouse moves in, create a div whose content is the value of the title attribute.
(2) Specify the position and set the css style
(3) When the mouse moves out, remove the div
(4) When the mouse moves, the coordinates of the XY axis should change accordingly.
*/
$(function(){
var x = 7;
var y = 8;
$("a.tip").hover(function(){
var title = this.title;
var $div = $("<div id='newTip'>"+title+"</div>");
$("body").append($div);
$div.css({"position":"absolute","background":"pink"});
},function(){
$("#newTip").remove();
}).mousemove(function(e){
var $div = $("#newTip").css({"left":(e.pageX+x)+'px',"top":(e.pageY+y)+'px'});
});
})
</script>
</head>
<body>
<a href="#">This is my tip</a>
</body>
</html>