[Tutorial] Información de los temas y respuestas estilo tooltip (efecto hover)
Pues esto lo realize dando la respuesta a un compañero del foro y pense... ¿Porque no lo pongo en tutoriales?, Quizas a alguien le gusta y le sirve 
Nivel: Basico.
Tiempo: 5mn (Como maximo)
Función: Al pasar el cursor sobre una celda aparece la información de los temas y las respuestas con un efecto tipo tooltip.
Creditos: Survivor21.
Ve al set de plantillas de tu tema/caja del foro/forumbit_depth1_cat, buscamos y eliminamos:
Buscamos en la misma plantilla:
Sustituimos por:
Ve al set de plantillas de tu tema/caja del foro/forumbit_depth2_forum, buscamos y eliminamos:
En la misma plantilla buscamos:
Debajo agregamos:
Ve al set de plantillas de tu tema/caja del foro/forumbit_depth2_cat, buscamos y eliminamos:
En la misma plantilla buscamos:
Debajo agregamos:
Añade esto en el css:
Ahora solo sube la imagen adjuntada en el directorio de su tema.
[attachment=772]
Resultado final:
![[Image: 29cudt1.jpg]](http://i53.tinypic.com/29cudt1.jpg)
Nivel: Basico.
Tiempo: 5mn (Como maximo)
Función: Al pasar el cursor sobre una celda aparece la información de los temas y las respuestas con un efecto tipo tooltip.
Creditos: Survivor21.
Ve al set de plantillas de tu tema/caja del foro/forumbit_depth1_cat, buscamos y eliminamos:
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>Buscamos en la misma plantilla:
<td class="thead" colspan="5">Sustituimos por:
<td class="thead" colspan="3">Ve al set de plantillas de tu tema/caja del foro/forumbit_depth2_forum, buscamos y eliminamos:
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>En la misma plantilla buscamos:
{$forum_viewers_text}Debajo agregamos:
<div class="hover_stats">
<img src="{$theme['imgdir']}/hover_stats_arrow.gif" class="stats_arrow" />
<div class="idx_stats">{$lang->forumbit_posts} {$posts}{$unapproved['unapproved_posts']} · {$lang->forumbit_threads} {$threads}{$unapproved['unapproved_threads']}</div>
</div>
Ve al set de plantillas de tu tema/caja del foro/forumbit_depth2_cat, buscamos y eliminamos:
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>En la misma plantilla buscamos:
{$forum_viewers_text}Debajo agregamos:
<div class="hover_stats">
<img src="{$theme['imgdir']}/hover_stats_arrow.gif" class="stats_arrow" />
<div class="idx_stats">{$lang->forumbit_posts} {$posts}{$unapproved['unapproved_posts']} · {$lang->forumbit_threads} {$threads}{$unapproved['unapproved_threads']}</div>
</div>Añade esto en el css:
.stats_arrow{ margin-left: 5px; margin-right: -5px; position: relative; margin-top: -1px; }
.idx_stats{ background: #424242; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #fff; font-size: 10px; padding: 3px 5px; display:inline; }
.hover_stats{ position: absolute; display:none; }
tr:hover .hover_stats{ display:inline; }
Ahora solo sube la imagen adjuntada en el directorio de su tema.
[attachment=772]
Resultado final:
![[Image: 29cudt1.jpg]](http://i53.tinypic.com/29cudt1.jpg)
Esta bien bueno, me gusta la idea.
+REP.
+REP.
+rep tengo tiempo buscandolo

De hecho el tutorial ya lo tenía creado desde hace tiempo y lo publique en una pagina de soporte de el mismo tipo que esta, pensé haberlo publicado aquí también y tremenda sorpresa me lleve al ver que no =/
Esta bueno
+10(?
la ultima parte como agrego eso ami CSS, donde esta el css es que soy novato
![[Image: signature.png]](https://omarg.me/cache/images/signature.png)
![[Image: kLUbBrj.png]](http://i.imgur.com/kLUbBrj.png)