jquery implements a hyperlink mouse prompt effect method _jquery

This example describes the way jquery implements a hyperlink mouse hint. Share to everyone for your reference. The specific analysis is as follows:

The browser actually has a hyperlink hint, just add the title attribute to the hyperlink. But the response speed of this prompt is very slow, about 1 seconds to delay about AH. What we need now is a prompt when the mouse moves to the hyperlink. Then you need to remove the title hint effect in a label, and do a similar function by yourself.

The HTML design is as follows:

Copy Code code as follows:

<p><a href= "http://www.jb51.net/" class= "tooltip" title= "Welcome to cloud-dwelling communities" > Welcome to Cloud-dwelling communities </a></p>

Then add mouseover and Mouseout events for the ToolTip hyperlink for class:

$ ("A.tooltip"). MouseOver (function () {  
    //display title  
}). mouseout (function () {  
    //Hide title  
});

The specific ideas to achieve this effect are as follows:

1. When the mouse over the hyperlinks, create a DIV element, the content of the DIV element is the value of the title property. The created element is then appended to the document. Set the x and Y coordinates for it so that it appears next to the mouse position.
2. When the mouse is over the hyperlink, remove the div element.

According to the analysis of ideas, write the following jquery code:

$ (function () {  
  var x = ten;   
  var y =;  
  $ ("A.tooltip"). MouseOver (function (e) {  
    this.mytitle = this.title;  
    This.title = "";    
    var tooltip = "<div id= ' tooltip ' >" + this.mytitle + "<\/div>";
    Create a DIV element  
    $ ("Body"). Append (tooltip);//Append it to the document  
    $ ("#tooltip")  
      . CSS ({  
        "top": (E.pagey + y) + "px", c12/> "Left": (E.pagex + x) + "px" 
      }). Show ("Fast"); Set the x and Y coordinates, and display  
  }. Mouseout (function () {    
    this.title = this.mytitle;  
    $ ("#tooltip"). Remove (); removal});  

There are two problems with the effect at this point: first of all, when the mouse is sliding, the title attribute of a tag will also appear: The second is to set the x and Y coordinates of the problem, because of homemade tips and the mouse distance too close, and sometimes can cause problems can not be prompted (mouse focus changes caused mouseout event).

To remove the title hint feature in the a tag, you need to do the following steps:

1. When the mouse is sliding, add a new attribute to the object, pass the value of title to this property, and then empty the value of the property title.

This.mytitle = This.title;  
S.title = "";   
var tooltip = "<div id= ' tooltip ' >" + this.mytitle + "<\/div>";
Create a DIV element

2. When the mouse slides out, and then the object of the value of the MyTitle property assigned to the property title.

Copy Code code as follows:

This.title = This.mytitle;

Why should the property value be assigned to the property title when the mouse slips out? Because when the mouse slides out, you need to consider the property title value of sliding again, if you do not reassign the value of MyTitle to the title property, when you slide again, the value of title is empty.

To solve the 2nd problem, you need to reset the top and left values for the prompt element, as shown in the code below, adding 10px to top and 20px to left:

var x = LO;  
var y =;  
$ ("#tooltip"). CSS ({  
    "top": (e.pagey+y) + "px",  
    "left": (e.pagex+x) + "px" 
});

OK, here are the problems solved, the mouse hyperlink hint effect implementation.

I hope this article will help you with your jquery programming.