Very odd behavior with Dynamically Generated Tooltips Created May 28, 2010

I have a calendar that dynamically generates content loaded from a db table in my CMS.

I want tooltips displaying the content of each date that has an event as the user hovers over the date.

Everything works fine, except the content of the tooltip always shows the content of the first date on the calendar, no matter which date I hover over, even though the content in the source code shows that it is clearly different for each date.

For example,

When I hover over May 05, it shows the info about the office meeting. The source code shows that it is generating this:

<a class="open_cal" href="http://localhost/CHR/events/2010/05/05/32">Office Meeting</a> 
      <div id="tooltip" class="tooltip">     
        <strong>Office Meeting</strong><br />
         Corporate Office <br />
         11:00 am - 1:00 pm<br />
         Regular bi-monthly office meeting
      </div>     

When I hover over May 07, which is a different event, the tooltip still shows the info about the office meeting. However, the source code shows that it is generating different content:

<a class="open_cal" href="http://localhost/CHR/events/2010/05/07/39/">Monthly Social at Indulge</a> 
      <div id="tooltip" class="tooltip">     
        <strong>Monthly Social at Indulge</strong><br />
         <b>Indulge Wine Bar</b><br />
         4:00 pm - 6:00 pm<br />
     </div>     

In other words my source code clearly shows that the information between the tags

  <div id="tooltip" class="tooltip"> this content is correct </div> 

is the correct dynamic content. However the tooltip content always displays the info from the first occurrence of the div tags.

Here's my source code:

jquery:

    	$(function()
           {
            $(".open_cal").tooltip({ 
            tip: '#tooltip', 
            position: 'bottom center', 
            offset: [0, 0], 
            lazy: true, 
            delay: 0
 
             });
           });

HTML:

{exp:calendar:month calendar_name="intranet_calendar" {if segment_3}date_range_start="{segment_3}-{segment_4}-01"{/if}}

      <a class="open_cal" href="{path=internal/events}{event_start_date format="%Y/%m/%d"}/{event_id}/" target="_parent">{event_title}</a>
 
      <div id="tooltip" class="tooltip">     
        <strong>{event_title}</strong><br />
         {event_location} <br />
         {event_start_time} - {event_end_time}<br />
         {event_summary}
      </div>  
   
{/exp:calendar:month}

Can anyone help?