Forum Home Enhancements - Facebook-like tooltip for forum descriptions

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() - (mousex + 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
            mousex = 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: mousex });
    });
});
</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

[nacaruncr]

awesome men, thanks. I'll put it in my web, looks awesome thankyou

[xuanhuy238]

I've done the installation but it's not exactly in you demo, I got a green underline in tooltips.

How to remove it?

[Jeff Ledger]

Stylevers / linkhover_linkDecoration

text-underline set to no

[Phil K?vin]

Cool!!

[Dr.osamA]

installed thank you bro

5 stars

[Alfa1]

I guess that with a few small changes this can be used for vb3.8.6?

[FReeSTER]

wow mate, Im loving this

[Jeff Ledger]

Originally Posted by FReeSTER

wow mate, Im loving this

You are welcome!

Originally Posted by Dr.osamA

installed thank you bro

5 stars

Thank you so much

Originally Posted by pнιl ĸ?vιn

Cool!!

Thanks

Originally Posted by Alfa1

I guess that with a few small changes this can be used for vb3.8.6?

Yup, it can be done in any version of vbulletin, but sadly, I don't have any running 3.8.x board on my PC.

Jeff

[Wayne Luke]

As of 4.1.0 (maybe earlier), jquery is included in the vBulletin download in clientscript/jquery.