In modern browsers, hyperlinks already have their own prompts, just add the < title > attribute to the < a > tag. The code is as follows:
<a href="#"title =" this is my hyperlink tip. "> tips</a>
But this prompt effect is very slow, to achieve better human-computer interaction, you need to move the mouse to the moment of hyperlink prompt. This can be achieved by removing the < title > tag in < a >
1 mouse to hyperlink
<1> Create the < div > element whose content is the value of the title attribute
<2> Append the created element to the document
<3> Set the xy coordinate for it, with the period displayed next to the mouse position
$("a.tooltip").mouseover(function(e){
//Create div element
this.myTitle=this.title; //Add new attribute
this.title="";
var tooltip="<div id='tooltip'>"+this.myTitle+"</div>";
$("body").append(tooltip); //Append it to the document
$("tooltip")
.css({
"top":(e.pageY+y)+"px"; // Adjust coordinate distance
"left":(e.pageX+x)+"px";
})
.show("fast"); //Set coordinates and display
});2 remove the < div > element by sliding the mouse out of the hyperlink
.mouseout(function(){
this.title=this.myTitle;
$("#tooltip").remove();
});3 when the mouse moves over the hyperlink, the prompt effect moves with it
.mousemove(function(e){ //When the mouse moves over a hyperlink, the prompt effect moves with the mouse
$("#tooltip").css({
"top":(e.pageY+y)+"px"; // Adjust coordinate distance
"left":(e.pageX+x)+"px";
});4 the complete code is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hyperlink tips</title>
<script src="../jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var x=10;
var y=20;
$("a.tooltip").mouseover(function(e){
//Create div element
this.myTitle=this.title; //Add new attribute
this.title="";
var tooltip="<div id='tooltip'>"+this.myTitle+"</div>";
$("body").append(tooltip); //Append it to the document
$("tooltip")
.css({
"top":(e.pageY+y)+"px"; // Adjust coordinate distance
"left":(e.pageX+x)+"px";
})
.show("fast"); //Set coordinates and display
}).mouseout(function(){
this.title=this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){ //When the mouse moves over a hyperlink, the prompt effect moves with the mouse
$("#tooltip").css({
"top":(e.pageY+y)+"px"; // Adjust coordinate distance
"left":(e.pageX+x)+"px";
});
});
});
</script>
</head>
<body>
<p><a href="#"Class =" tooltip "title =" this is my hyperlink tip 1. "> tip 1</a></p>
<p><a href="#"Class =" tooltip "title =" this is my hyperlink tip 2. "> tip 2</a></p>
<p><a href="#"title =" this is a self-contained reminder 1. "> self-contained reminder 1</a></p>
<p><a href="#"title =" this is a self-contained reminder 1. "> self-contained reminder 1</a></p>
</body>
</html>