极客观点
项目管理
HarmonyOS
1、实现这个效果的思路如下：
当鼠标滑入时，创建一个<div>,<div>的内容为<a>的title属性的值；
将创建的属性追加至文档；
设置它的x坐标y坐标，使其显示在<p>标签旁。
当鼠标滑出超链接时移除<div>。
我遇到的问题是第一二个<a>标签的提示信息没有出现在<p>标签旁。
2、代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="script/jquery-3.2.1.min.js"></script>
<script>
$(function(){
var x=5;
var y=10;
$("a.tooltip").mouseover(function(e){
this.mytitle=this.title;
this.title="";
var tooltip="<div id='tooltip'>"+this.mytitle+"</div>";
$("body").append(tooltip);
$("#tooltip")
.css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
}).show("fast");
}).mouseout(function(){
this.title=this.mytitle;
$("#tooltip").remove();
})
})
</script>
</head>
<body>
<p><a href="#" class="tooltip" title="手动制作的超链接提示1">手动提示1</a></p>
<p><a href="#" class="tooltip" title="手动制作的超链接提示2">手动提示2</a></p>
<p><a href="#" title="自带提示1">提示1</a></p>
<p><a href="#" title="自带提示2">提示2</a></p>
</body>
</html>