Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style type= "Text/css" >
#tooltip {
position:absolute;/* set to absolute positioning to set div around position */
border:1px solid #333;
Background:white;
Display:none;
}
</style>
<script src= "Js/jquery-2.1.4.js" ></script>
<script>
$ (function () {
var x=10;
var y=20;
$ ("A.tooltip"). MouseOver (function (e) {//e as the event object
This.mytitle=this.title;//gets the title of the current move in
This.title= "";//move in is title null
var tooltip= "<div id= ' tooltip ' >" +this.mytitle+ "<\/div>"; Create Div;
$ ("Body"). Append (tooltip);//div added to the document
$ ("#tooltip")
. css ({
"Top": (e.pagey+y) + "px",//Set mouse pointer position, PageX () property is the position of the mouse pointer, the higher the value, the lower
"Left": (e.pagex+x) + "px"//pagex () property is the position of the mouse pointer, the higher the value the more the right
}). Show ("Fast");//(Note: When parameters are passed in, the. Show () and. Hide () methods animate the Width,height and transparency properties of the element, and the incoming parameter controls the explicit speed, in milliseconds, such as. Show (600), or fast, Normal,slow,fast is 200 milliseconds, normal is 400 milliseconds, slow is 600 milliseconds)
}). mouseout (function () {
This.title=this.mytitle;
$ ("#tooltip"). Remove ();//Remove
}). MouseMove (function (e) {//mousemove event, let the hint and mouse move together
$ ("#tooltip")
. css ({
"Top": (e.pagey+y) + "px",
"Left": (e.pagex+x) + "px"
});
});
})
</script>
<body>
<p><a href= "#" class= "tooltip" title= "hyperlink hint 1" > Hint 1</a></p>
<p><a href= "#" class= "tooltip" title= "hyperlink hint 2" > Hint 2</a></p>
<p><a href= "#" title= "This is your own cue 1" > Bring your own hint 1</a></p>
<p><a href= "#" title= "This is your own cue 2" > Bring your own hint 2</a></p>
</body>jquery hyperlink hint
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
