Facebook-like tooltip for forum descriptions

[Admin]

Hello guys,
Someone asked me to write this small mod for him and I decided to release it free for everybody here at vb.org.

• If you are running a big board with a lot of forums. Especially someone who are using 2 column for display box in forumhome, you must meet the problems with display forum descriptions. Your layout will be look cleaner and nicer if all the box looks equal together.
• This mod remove the default descriptions and only dislay it on mouse-over (similiar to xenforo).

I only use very small jquery and css to display it, then it won't do any effect to your site load.

• Live demo: http://vitrastudio.com
  http://www.thevbexperts.com
• Screenshot: attachments
• Brought to you by vitrastudio.com

Installation:
I. Add the following css in your additional.css

.tip {
    background: none repeat scroll 0 0 #1D1D1D;
    color: #FFFFFF;
    display: none;
    font-size: 11px;
    font-weight: normal;
    margin-left: 10px;
    padding: 3px 7px;
    position: absolute;
    width: 300px;
    z-index: 1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  opacity: 0.8;
}

II. Add the following code at the bottom of your headinclude template

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    //Tooltips
    $(".tip_trigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip
        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mou*** + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);
        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mou*** = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mou*** });
    });
});
</script>

I'm using google api for jquery but of course, you can download it and reupload it to your site.
III. Open template forumhome_forumbit_level2_post
Find the following code

<h2 class="forumtitle"><a href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></h2>

Change to

<h2 class="forumtitle"><a title="" class="tip_trigger" style="" href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}<span class="tip"><vb:if condition="$show['forumdescription']"><p class="forumdescription">{vb:raw forum.description}</p></vb:if></span></a></h2>

Find the following code

<vb:if condition="$show['forumdescription']"><p class="forumdescription">{vb:raw forum.description}</p></vb:if>

Remove it
Pretty simple huh ?
If you using it on your site, please mark as installed to show your support.
More will come, I promised.
Regards,
Jeff Ledger