This is what you'll end up with - tested on default and a custom theme
![[Image: iboKzZMt9EuDId.png]]()
First open your Templates > Ungrouped Templates > Headerinclude and Add this below all your jQuery files
Next open Templates > Forumbit templates > Forumbit_depth2_forum and replace it with this
Then go to Themes and make a new stylesheet and fill it with this..
Files here - upload to your themes images folder
![.js]( "Unknown")
jquery.tipTip.js (Size: 6.71 KB / Downloads: 3)
![.js]( "Unknown")
jquery.tipTip.minified.js (Size: 5.13 KB / Downloads: 3)
![[Image: iboKzZMt9EuDId.png]](http://i.minus.com/iboKzZMt9EuDId.png)
First open your Templates > Ungrouped Templates > Headerinclude and Add this below all your jQuery files
Code:
<script type="text/javascript" src="{$theme['imgdir']}/jquery.tipTip.js"></script>
<script>
$(function(){
$(".tooltip").tipTip({
maxWidth: "*",
edgeOffset: 10,
defaultPosition: "right",
});
});
</script>Next open Templates > Forumbit templates > Forumbit_depth2_forum and replace it with this
Code:
<tr>
<td class="{$bgcolor}" align="center" valign="middle" width="1"><span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span></td>
<td class="{$bgcolor}" valign="middle">
<strong><a class="tooltip" href="{$forum_url}" title="{$forum['description']}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$modlist}{$subforums}</div>
</td>
<td class="{$bgcolor}" valign="middle" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" valign="middle" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor}" valign="middle" align="right" style="white-space: nowrap">{$lastpost}</td>
</tr>Then go to Themes and make a new stylesheet and fill it with this..
Code:
#tiptip_holder {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99999;
}
#tiptip_holder.tip_top {
padding-bottom: 5px;
}
#tiptip_holder.tip_bottom {
padding-top: 5px;
}
#tiptip_holder.tip_right {
padding-left: 5px;
}
#tiptip_holder.tip_left {
padding-right: 5px;
}
#tiptip_content {
font-size: 12px;
padding: 4px 8px;
background: #161617;
color: #ffffff;
border: 1px solid #000;
text-shadow: 1px 1px 0px #161617;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 1px 4px, inset rgba(255,255,255,0.13) 0px 1px 0px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 1px 4px, inset rgba(255,255,255,0.13) 0px 1px 0px;
box-shadow: rgba(0,0,0,0.3) 0px 1px 4px, inset rgba(255,255,255,0.13) 0px 1px 0px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#tiptip_arrow, #tiptip_arrow_inner {
position: absolute;
border-color: transparent;
border-style: solid;
border-width: 6px;
height: 0;
width: 0;
}
#tiptip_holder.tip_top #tiptip_arrow {
border-top-color: #fff;
border-top-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_bottom #tiptip_arrow {
border-bottom-color: #fff;
border-bottom-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_right #tiptip_arrow {
border-right-color: #fff;
border-right-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_left #tiptip_arrow {
border-left-color: #fff;
border-left-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_top #tiptip_arrow_inner {
margin-top: -7px;
margin-left: -6px;
border-top-color: rgb(25,25,25);
border-top-color: rgba(25,25,25,0.92);
}
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
margin-top: -5px;
margin-left: -6px;
border-bottom-color: rgb(25,25,25);
border-bottom-color: rgba(25,25,25,0.92);
}
#tiptip_holder.tip_right #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -5px;
border-right-color: rgb(25,25,25);
border-right-color: rgba(25,25,25,0.92);
}
#tiptip_holder.tip_left #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -7px;
border-left-color: rgb(25,25,25);
border-left-color: rgba(25,25,25,0.92);
}Files here - upload to your themes images folder
jquery.tipTip.js (Size: 6.71 KB / Downloads: 3)
jquery.tipTip.minified.js (Size: 5.13 KB / Downloads: 3)