vb.org Archive - 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

Code:

.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

Code:

<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

Code:

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

Change to

Code:

<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

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

X vBulletin 3.8.12 by vBS Debug Information

Page Generation 0.01177 seconds
Memory Usage 1,764KB
Queries Executed 10 (?)

More Information

Template Usage:

(1)ad_footer_end
(1)ad_footer_start
(1)ad_header_end
(1)ad_header_logo
(1)ad_navbar_below
(5)bbcode_code_printable
(8)bbcode_quote_printable
(1)footer
(1)gobutton
(1)header
(1)headinclude
(6)option
(1)post_thanks_navbar_search
(1)printthread
(22)printthreadbit
(1)spacer_close
(1)spacer_open

Phrase Groups Available:

global
postbit
showthread

Included Files:

./printthread.php
./global.php
./includes/init.php
./includes/class_core.php
./includes/config.php
./includes/functions.php
./includes/class_hook.php
./includes/modsystem_functions.php
./includes/class_bbcode_alt.php
./includes/class_bbcode.php
./includes/functions_bigthree.php

Hooks Called:

init_startup
init_startup_session_setup_start
init_startup_session_setup_complete
cache_permissions
fetch_threadinfo_query
fetch_threadinfo
fetch_foruminfo
style_fetch
cache_templates
global_start
parse_templates
global_setup_complete
printthread_start
bbcode_fetch_tags
bbcode_create
bbcode_parse_start
bbcode_parse_complete_precache
bbcode_parse_complete
printthread_post
printthread_complete

Messages:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01177 seconds Memory Usage 1,764KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (5)bbcode_code_printable (8)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (22)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: