How to make tool tip appear over my div rectangle?

How to make tool tip appear over my div rectangle?

I have 2 rectangles and a paragraph with text on my page.  I need to make a tool tip appear when the mouse is over each of them.  I have got this to work for the p but not the rectangles.  I am guessing because I can't add my css tooltip class to my div rectangles?

  2. #rectangle1{                                      css for my div id rectangle one
  3.         position:absolute;
  4.         border:1px solid #333;
  5.         padding:2px 5px;
  6.         background-color:red;
  7. top: 100px;
  8. right: 100px;
  9. height: 100px;
  10. width: 100px;
  11.       }
  2. #tooltip{
  3.         position:absolute;
  4.         border:1px solid #333;
  5.         background:black;
  6.         padding:2px 5px;
  7.         color:red;
  8.       }
  10. <div id="rectangle1" class="tooltip" title="rectangle one"></div>            !!!!html for my div!!!!
  11.   <div id="rectangle2" class="tooltip" title="rectangle two"></div>
  12.   <p><a href="http://cssglobe.com" class="tooltip" title="gazine">Roll over for tooltip</a></p>    !!!html for my p which works perfectly fine.!!!!!