jquery text hint and picture hint effect realization method _jquery

This article is an example of how jquery text hints and picture hint effects are implemented. Share to everyone for your reference, specific as follows:

1. The effect as shown:

2. Text Hint code:

<script type= "Text/javascript" >//<!
 [Cdata[$ (function () {var x = 10;
 var y = 20;
  $ ("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 ', ' Left ': (e.pagex+x) + "px"}). Show ("Fast");
  Set the x and Y coordinates, and display}. mouseout (function () {this.title = This.mytitle; $ ("#tooltip"). Remove ();
   Remove}). MouseMove (function (e) {$ ("#tooltip"). CSS ({"Top": (e.pagey+y) + "px", "Left": (e.pagex+x) + "px"
 });
}); })//]]> </script>  

3. Picture hint code:

<script type= "Text/javascript" >//<!
 [Cdata[$ (function () {var x = 10;
 var y = 20;
  $ ("A.tooltip"). MouseOver (function (e) {this.mytitle = This.title;
  This.title = ""; var imgtitle = This.mytitle?
  "<br/>" + this.mytitle: ""; var tooltip = "<div id= ' tooltip ' > </script>  

More interested readers of jquery-related content can view the site topics: "jquery Common Classic Effects Summary", "JQuery Extended Skills Summary", "jquery common Plug-ins and Usage summary", "jquery drag and drop effects and tips summary", "jquery Table" ( Table) Summary of operational techniques, summary of AJAX usage in jquery, a summary of jquery animation and special effects usage, and a summary of jquery selector usage

I hope this article will help you with the jquery program design.