Tooltip nas categorias

Olá, gostaria de um Tooltip como este nas categorias, que ao passar o mouse aparece com o número de tópicos e respostas.

Segue o Fórum: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

*Se já existe um Tópico com conteúdo parecido, desculpe, mas não achei.

Código:


<div class="regras-chat">Não daremos suporte no chat! Usuários que insistirem serão punidos! Favor utilizar o fórum para dúvidas.</div>
<div class="main">
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="main-head">
         <div class="page-title">{catrow.tablehead.L_FORUM}</div>
      </div>
      <div class="main-content">
         <table cellspacing="0" class="table">
            <tbody class="statused">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
               <tr>
                                                <td class="tc_icon">
                     <span class="status">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                     </span>
                                                </td>
                  <td class="tc_forum" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT};">
                                                        <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                     <br />
                     {catrow.forumrow.FORUM_DESC}
                                       <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}   
                                                  {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                  <!-- BEGIN switch_moderators_links -->
                     <br />
                     {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                     <!-- END switch_moderators_links -->   
                                                  <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                  </td>
                                          <td class="tc3"><strong>{catrow.forumrow.TOPICS}</strong> tópicos<br /><strong>{catrow.forumrow.POSTS}</strong> respostas</td>
                  <td class="tcr">
                     <span>
                     <!-- BEGIN switch_topic_title -->
                     <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                     <!-- END switch_topic_title -->
                     {catrow.forumrow.USER_LAST_POST}
                     </span>
                  </td>
               </tr>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
            </tbody>
         </table>
      </div>
   <!-- END tablefoot -->
<!-- END catrow -->
</div>

<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
   <ul>
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
      <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
   </ul>
   <!-- BEGIN switch_delete_cookies -->
   <p class="right">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
   </p>
   <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->


Código:

<div class="regras-chat">Não daremos suporte no chat! Usuários que insistirem serão punidos! Favor utilizar o fórum para dúvidas.</div>
<div class="main">
    <!-- BEGIN catrow -->
    <!-- BEGIN tablehead -->
    <div class="main-head">
        <div class="page-title">{catrow.tablehead.L_FORUM}</div>
    </div>
    <div class="main-content">
        <table cellspacing="0" class="table">
            <tbody class="statused">
                <!-- END tablehead -->

                <!-- BEGIN forumrow -->
                <tr>
                    <td class="tc_icon">
                        <span class="status">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </span>
                    </td>
                    <td class="tc_forum" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT};">
                        <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                        </h{catrow.forumrow.LEVEL}>
                        <div class="hover_stats" style="left: 300px;">
                            <img src="http://i79.servimg.com/u/f79/18/24/85/15/hover_10.gif" alt="" class="stats_arrow" style="">
                            <div class="idx_stats">{catrow.forumrow.TOPICS} Tópicos · {catrow.forumrow.POSTS} Respostas</div>
                        </div>
                        <br />{catrow.forumrow.FORUM_DESC}
                        <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS} {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                        <!-- BEGIN switch_moderators_links -->
                        <br />{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                        <!-- END switch_moderators_links -->
                        <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                    </td>
                    <td class="tc3"></td>
                    <td class="tcr">
                        <span>
                    <!-- BEGIN switch_topic_title -->
                    <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                    <!-- END switch_topic_title -->
                    {catrow.forumrow.USER_LAST_POST}
                    </span>
                    </td>
                </tr>
                <!-- END forumrow -->

                <!-- BEGIN tablefoot -->
            </tbody>
        </table>
    </div>
    <!-- END tablefoot -->
    <!-- END catrow -->
</div>

<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
    <ul>
        <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
        </li>
        <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
        </li>
        <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
        </li>
    </ul>
    <!-- BEGIN switch_delete_cookies -->
    <p class="right">
        <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
    </p>
    <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

Código:


.hover_stats {
display: none;
position: absolute;
}
.stats_arrow {
margin-left: 5px;
margin-right: -1px;
margin-top: -1px;
position: relative;
}
.idx_stats {
background: rgb(66, 66, 66);
border-radius: 3px;
color: rgb(255, 255, 255);
display: inline;
font-size: 10px;
padding: 3px 5px;
}


Código:


jQuery(function() {
  jQuery('table.table tbody.statused tr').mouseenter(function() {
    jQuery(this).find('.hover_stats').fadeIn('slow').animate({left: '290px'}, 200).animate({left: '300px'}, 200)
  });
  jQuery('table.table tbody.statused tr').mouseleave(function() {
    jQuery(this).find('.hover_stats').fadeOut('slow').animate({left: '300px'}, 200)
  })
});