Would like to apply a class to specific category events within a span title

Question

I'm using Solspace Calendar. I have a very clean monthly calendar where I am using a tool tip to display the events and their details. I also have 3 event categories and I would like to display them with special colors (I am using classes to define the colors). I have the tool tip working wonderfully within the calendar but since i cannot add html(other than a
tag) to the title of the span to use as the tooltip (this is where the event information is pulled into), i'm having a difficult time thinking this out. I want to be able to format the tooltip to show each event in the color that is specified for the category. So really 2 things much happen and I would love to see if anyone else can help me get there.

1. add a conditional to the {events} tag pair that displays the event of a particular category. Maybe something like {if category_id == "3"} show this event {/if}
2. add a class to the event if the category is specified.

I've tried a dozen ways, but I am sure I am not seeing something. So any suggestions would be GREAT!!! here is my code currently, without the conditionals or the color class.

{exp:calendar:cal date_range_start="year-month-01" date_range_end="1 months"}
 {display_each_month}
 <table class="calendar">
 <thead>
 <tr>
 <th>{date format="%F %Y"}</th>
    </tr>
     </thead>
        <tbody>
          <tr>
           <td colspan="7">
             <div class="wrap">
                <table id="fc_inner">
                   <thead>
                      <tr id="days_of_week">
                         {display_each_day_of_week}
                             <th>
                              {day_of_week_short} 
                             </th>
                              {/display_each_day_of_week}
                       </tr>
                   </thead>
                   <tbody>
                      {display_each_week}
                      <tr>
                        {display_each_day}
                          <td>
                             <span data-tooltip class="has-tip" title="
                               {display_each_hour}
                               {events}
                                 {event_title} - From: {event_start_date         format="%g"} To: {event_end_date format="%g"}<br>
                               {/events}
                               {/display_each_hour}
                               ">
                               {date format="%j"}
                               </span>
                          </td>
                         {/display_each_day}
                        </tr>
                        {/display_each_week}
                    </tbody>
                   </table>
                 </div>
                </td>
               </tr>
             </tbody>
           </table>
      {/display_each_month}
 {/exp:calendar:cal}

Answer 1

Within the {events}{/events} tag pair, use the {categories}{/categories} tag pair as you would with {exp:channel:entries}, and use it for your needs:

{categories}{if category_id == 3}Some class{/if}{/categories}