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

[Dr.osamA]

Originally Posted by Nimaveli

Can someone PLEASE convert this for use on the forumdisplay?

try this one bro

https://vborg.vbsupport.ru/showthread.php?t=256440

[sixdemons]

I dont know why, but after everything I just see a opacity line with no round corners and no text..

I even tried to change the jquery version from google that is on the script from the 1.4.2 to 1.7.1 and still no luck, same problem...