HTML：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>超链接提示效果</title> 6 <script src="js/jquery-3.1.1.js"></script> 7 <script src="js/3_3.js"></script> 8 </head> 9 <body> 10 <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p> 11 <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p> 12 <p><a href="#" title="这是自带提示1.">自带提示1.</a> </p> 13 <p><a href="#" title="这是自带提示2.">自带提示2.</a> </p> 14 </body> 15 </html>
JS：
1 /**
2 * Created by Administrator on 2017/1/10.
3 */
4 $(function () {
5 var x = 10;
6 var y = 20;
7 $("a.tooltip").mouseover(function (e) {
8
9 this.myTitle = this.title;
10 this.title = "";
11 //创建div元素
12 var $tooltip = $("<div id=‘tooltip‘>"+this.myTitle+"</div>");
13 $("body").append($tooltip);
14 //设置x，y坐标，并显示
15 $("#tooltip").css({"position":"absolute","top":(e.pageY+y)+"px",
16 "left":(e.pageX+x)+"px"}).show("fast");
17
18 }).mouseout(function () {
19 this.title = this.myTitle;
20 $("#tooltip").remove();
21
22 }).mousemove(function (e) { //提示效果随着鼠标移动而移动
23 $("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"});
24 });
25 })
效果：
时间： 2024-12-22 09:39:38