Witam mam mały problem chodzi o tips ze strony Mootools.net

Tutaj

mój kod html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <title>Untitled Document</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <script type="text/javascript">
  6. window.addEvent('domready', function(){
  7. /* Tips 1 */
  8. var Tips1 = new Tips($$('.Tips1'));
  9.  
  10. /* Tips 2 */
  11. var Tips2 = new Tips($$('.Tips2'), {
  12. initialize:function(){
  13. this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
  14. },
  15. onShow: function(toolTip) {
  16. this.fx.start(1);
  17. },
  18. onHide: function(toolTip) {
  19. this.fx.start(0);
  20. }
  21. });
  22.  
  23. /* Tips 3 */
  24. var Tips3 = new Tips($$('.Tips3'), {
  25. showDelay: 400,
  26. hideDelay: 400,
  27. fixed: true
  28. });
  29.  
  30. /* Tips 4 */
  31. var Tips4 = new Tips($$('.Tips4'), {
  32. className: 'custom'
  33. });
  34. });
  35. </script>
  36. <link href="style.css" rel="stylesheet" type="text/css" />
  37. </head>
  38.  
  39.  
  40.  
  41. <h3>
  42. Tips 1
  43. </h3><img src="2.gif" alt="mooCow" class="Tips1" title=
  44. "Tips Title :: This is my tip content" />
  45. <h3>
  46. Tips 2
  47. </h3><img src="2.gif" alt="mooCow" class="Tips2" title=
  48. "Tips Title :: This is my tip content" />
  49. <h3>
  50. Tips 3
  51. </h3>Fixed tooltip: <a href="http://www.mootools.net" onclick="return false;" class="Tips3" title=
  52. "Mootools official website">Mootools.net</a>
  53. <h3>
  54. Tips 4
  55. </h3>Custom className: <a href="http://www.mootools.net" onclick="return false;" class="Tips4" title=
  56. "Mootools official website">Mootools.net</a>
  57.  
  58.  
  59. </body>
  60. </html>


kod css
  1. .tool-tip {
  2. color: #fff;
  3. width: 139px;
  4. z-index: 13000;
  5. }
  6.  
  7. .tool-title {
  8. font-weight: bold;
  9. font-size: 11px;
  10. margin: 0;
  11. color: #9FD4FF;
  12. padding: 8px 8px 4px;
  13. background: url(bubble.png) top left;
  14. }
  15.  
  16. .tool-text {
  17. font-size: 11px;
  18. padding: 4px 8px 8px;
  19. background: url(bubble.png) bottom right;
  20. }
  21.  
  22. .custom-tip {
  23. color: #000;
  24. width: 130px;
  25. z-index: 13000;
  26. }
  27.  
  28. .custom-title {
  29. font-weight: bold;
  30. font-size: 11px;
  31. margin: 0;
  32. color: #3E4F14;
  33. padding: 8px 8px 4px;
  34. background: #C3DF7D;
  35. border-bottom: 1px solid #B5CF74;
  36. }
  37.  
  38. .custom-text {
  39. font-size: 11px;
  40. padding: 4px 8px 8px;
  41. background: #CFDFA7;
  42. }

i efekt nie wyszedł
Czy może ktoś powiedzieć dlaczego
Czego nie dodałem ?