Pentru inceput, adaugam urmatorul cod in gestiunea codurilor JavaScript:

Cod:


function modToolTip(a,b,c){a&&b&&jQuery('b a[href^="/g'+a+'-"]').hover(function(){jQuery(this).addClass("tooltip active-hover-"+a);jQuery(this).attr("data",b);jQuery(this).attr("colors",c)},function(){jQuery(this).removeAttr("class");jQuery(this).removeAttr("data");jQuery(this).removeAttr("colors")})};

jQuery(function() {
   modToolTip(1, 'Grupul de administratori ai forumului', '');
   modToolTip(2, 'Grupul de moderatori', '#000099');
   modToolTip(3, 'Grupul de asistenti', '');
   modToolTip(4, 'Grupul de graficieni', '');
   modToolTip(5, 'Utilizatorii forumului', '');
   modToolTip(6, 'Membri cu peste 30 de mesaje', '');
});

Va trebui sa modificati 1/2/3/4/5/6 cu ID-urile grupurilor si #000099 cu culoarea dorita.

Apoi adaugam in foaia de stil css:

Cod:

.tooltip:hover:after {
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(data);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
    font-size: 10px;
    color: attr(colors);
}

.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}