MyBB Community Forums

This is what you'll end up with - tested on default and a custom theme




First open your Templates > Ungrouped Templates > Headerinclude and Add this below all your jQuery files

<script>
$(function(){
  $(".tooltip").tipTip({
    maxWidth: "100%", //
    edgeOffset: 10, // 
    defaultPosition: "right", //
    fadeIn: "90", //
    fadeOut: "9950", //
    delay: "999", //
    });
});
</script>

Next open Templates > Forumbit templates > Forumbit_depth2_forum and replace it with this

<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..

#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

[attachment=32616]
[attachment=32617]

Awesome! Extremely awesome and useful, keep up the work, you have been making lots of things recently.

Nice one!

Nice tutorial!

not working here :/

(2014-10-18, 09:02 AM)Ammy Wrote: [ -> ]not working here :/

Did you link jquery.tipTip.js in your headerinclude and upload the .js file?.

yep, linked it under the jquery refs and above the stylesheet variable, uploaded the .js to admin/styles/default/images (using default theme atm)

Whats your forum url?

i already reverted the changes ^^ its not something i must have

Okay tried it once again, keeps popping up as a normal popup >.<