Jquery Ajax Tooltip ...

In this tutorial you will know an easy way to pop up a "tooltip" with more information about a person whenever you see a person is name.

Here when you mouse over another name, the previous one will disappear
first you need to specify a certain css class that jquery expects, and we are using the "rel" tag to contain data to pass to our ajax helper page.

01.<a class="personPopupTrigger" href="<link to person>" rel="4218,a17bee64-8593-436e-a2f8-599a626370df">House, Devon</a>  
02.<a class="personPopupTrigger" href="<link to person>" rel="4218,f6434101-15bf-4c06-bbb2-fbe8c111b948">House, Gregory</a> 

Run this on startup, and it will convert all of your links with the "personPopupTrigger" class to have the tooltip, Here is the javascript code:

01.$(function()  
02.{  
03.  var hideDelay = 500;    
04.  var currentID;  
05.  var hideTimer = null;  
06. 
07.  // One instance that is reused to show info for the current person  
08.  var container = $(<div id="personPopupContainer"> 
09.      + <table width="" border="0" cellspacing="0" cellpadding="0" align="center" class="personPopupPopup"> 
10.      + <tr> 
11.      +    <td class="corner topLeft"></td> 
12.      +    <td class="top"></td> 
13.      +    <td class="corner topRight"></td> 
14.      + </tr> 
15.      + <tr> 
16.      +    <td class="left">&nbsp;</td> 
17.      +    <td><div id="personPopupContent"></div></td> 
18.      +    <td class="right">&nbsp;</td> 
19.      + </tr> 
20.      + <tr> 
21.      +    <td class="corner bottomLeft">&nbsp;</td> 
22.      +    <td class="bottom">&nbsp;</td> 
23.      +    <td class="corner bottomRight"></td> 
24.      + </tr> 
25.      + </table> 
26.      + </div>);  
27. 
28.  $(ody).append(container);  
29. 
30.  $(.personPopupTrigger).live( amouseover, function()  
31.  {  
32.      // format of arel tag: pageid,personguid  
33.      var settings = $(this).attr( arel).split(,);  
34.      var pageID = settings[0];  
35.      currentID = settings[1];  
36. 
37.      // If no guid in url rel tag, don popup blank  
38.      if (currentID == )  
39.          return;  
40. 
41.      if (hideTimer)  
42.          clearTimeout(hideTimer);  
43. 
44.      var pos = $(this).offset();  
45.      var width = $(this).width();  
46.      container.css({  
47.          left: (pos.left + width) + px,  
48.          top: pos.top - 5 + px 
49.      });  
50. 
51.      $(#personPopupContent).html(&nbsp;);  
52. 
53.      $.ajax({  
54.          type: GET,  
55.          url: personajax.aspx,  
56.          data: page= + pageID + &guid= + currentID,  
57.          success: function(data)  
58.          {  
59.              // Verify that we are pointed to a page that returned the expected results.  
60.              if (data.indexOf(personPopupResult) < 0)  
61.              {  
62.                  $(#personPopupContent).html(<span >Page + pageID + did not return a valid result for person + currentID + . 
63.Please have your administrator check the error log.</span>);  
64.              }  
65. 
66.              // Verify requested person is this person since we could have multiple ajax  
67.              // requests out if the server is taking a while.  
68.              if (data.indexOf(currentID) > 0)  
69.              {                    
70.                  var text = $(data).find(.personPopupResult).html();  
71.                  $(#personPopupContent).html(text);  
72.              }  
73.          }  
74.      });  
75. 
76.      container.css( wouldisplay, lock);  
77.  });  
78. 
79.  $(.personPopupTrigger).live( amouseout, function()  
80.  {  
81.      if (hideTimer)  
82.          clearTimeout(hideTimer);  
83.      hideTimer = setTimeout(function()  
84.      {  
85.          container.css( wouldisplay, one);  
86.      }, hideDelay);  
87.  });  
88. 
89.  // Allow mouse over of details without hiding details  
90.  $(#personPopupContainer).mouseover(function()  
91.  {  
92.      if (hideTimer)  
93.          clearTimeout(hideTimer);  
94.  });  
95. 
96.  // Hide after mouseout  
97.  $(#personPopupContainer).mouseout(function()  
98.  {  
99.      if (hideTimer)  
100.          clearTimeout(hideTimer);  
101.      hideTimer = setTimeout(function()  
102.      {  
103.          container.css( wouldisplay, one);  
104.      }, hideDelay);  
105.  });  
106.}); 

Here is the css code:

01.#personPopupContainer  
02.{  
03.    position:absolute;  
04.    left:0;  
05.    top:0;  
06.    display:none;  
07.    z-index: 20000;  
08.}  
09. 
10..personPopupPopup  
11.{  
12.} 
13.
14.#personPopupContent  
15.{  
16.    background-color: #FFF;  
17.    min-width: 175px;  
18.    min-height: 50px;  
19.}  
20. 
21..personPopupPopup .personPopupImage  
22.{  
23.    margin: 5px;  
24.    margin-right: 15px;  
25.}  
26. 
27..personPopupPopup .corner   
28.{  
29.    width: 19px;  
30.    height: 15px;  
31.}  
32.      
33..personPopupPopup .topLeft   
34.{  
35.    background: url(../images/personpopup/balloon_topLeft.png) no-repeat;  
36.}  
37.      
38..personPopupPopup .bottomLeft   
39.{  
40.    background: url(../images/personpopup/balloon_bottomLeft.png) no-repeat;  
41.}  
42.      
43..personPopupPopup .left   
44.{  
45.    background: url(../images/personpopup/balloon_left.png) repeat-y;  
46.}  
47.      
48..personPopupPopup .right   
49.{  
50.    background: url(../images/personpopup/balloon_right.png) repeat-y;  
51.}  
52.      
53..personPopupPopup .topRight   
54.{  
55.    background: url(../images/personpopup/balloon_topRight.png) no-repeat;  
56.}  
57.      
58..personPopupPopup .bottomRight   
59.{  
60.    background: url(../images/personpopup/balloon_bottomRight.png) no-repeat;  
61.}  
62.      
63..personPopupPopup .top   
64.{  
65.    background: url(../images/personpopup/balloon_top.png) repeat-x;  
66.}  
67.      
68..personPopupPopup .bottom   
69.{  
70.    background: url(../images/personpopup/balloon_bottom.png) repeat-x;  
71.    text-align: center;  
72.} 

 Original Source:
http://rndnext.blogspot.com/2009/02/jquery-ajax-tooltip.html