tooltip with jquery

tooltip with jquery

i'm creating tooltip for my web 

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>tooltips</title>
  7. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

  9. <script type="text/javascript">
  10. jQuery(document).ready(function(){
  11. $('a[rel^=tooltip]').mouseover(function(e){
  12. $(this).append('<div id="tooltip"><p>Testing</p></div>');
  13. /*
  14. var widthTootips = $('#tooltip').width();
  15. var heightTooltips = $('#tooltip').height();
  17. var screenWidth = $(document).width();
  18. var screenHeight = $(document).height();
  19. */
  20. var mouseX = e.pageX;
  21. var mouseY = e.pageY;
  23. var left =mouseX;
  24. var top =mouseY;
  25. //$('#tooltip').css({'left':left,'top':top+20,'display':'block'});
  26. //add tooltip om page
  28. $('#tooltip').animate({'display':'block','left':left,'top':top},1000,function(){});
  31. // move tooltip when mouseover elelemnt
  32.  
  33. }).mousemove(function(ex){
  34. $('#tooltip').css({'left':ex.pageX-40,'top':ex.pageY+20});
  35. }).mouseout(function(){
  36. $('#tooltip').remove();
  37. });
  38. })

  40. </script>
  41. <style type="text/css">
  42. *{padding:0;margin:0;}
  43. #tooltip{
  44. position:absolute;
  45. width:200px;
  46. height:100px;
  47. z-index:9999;
  48. background:#093;
  49. top:0;
  50. left:0;
  51. display:none;
  53. }
  54. </style>
  55. </head>

  57. <body>
  58. <div style="margin:50px auto; width:200px;">
  59.      <ul>
  60.      <li><a href="#" title="Tooltips" rel="tooltip">This is tooltip</a></li>    
  61.          <li><a href="#" title="Tooltips" rel="tooltip">This is tooltip</a></li>    
  62.             <li><a href="#" title="Tooltips" rel="tooltip">This is tooltip</a></li>    
  63.         </ul>
  64.     </div>
  65. </body>
  66. </html>
 it don't work. i don't know why ? help me please!