Este código funciona em todas as versões.




1º Passo

Vamos ir até o JS e inserir o javascript abaixo:


P.C - > Módulos - > HTML & JAVASCRIPT - > Gestão dos códigos Javascript




Título * : Escolha um titulo.

Investimento * : Em todas as páginas.

Código JavaScript * : Insirir o código abaixo.

Código:

var CopyrightNotice="Tooltip tipo facebook pra forumeiros criado por ÆDesign basiado no trabalho de Jason Frame.";eval(function(h,b,i,d,g,f){g=String;if(!"".replace(/^/,String)){while(i--){f[i]=d[i]||i}d=[function(a){return f[a]}];g=function(){return"\\w+"};i=1}while(i--){if(d[i]){h=h.replace(new RegExp("\\b"+g(i)+"\\b","g"),d[i])}}return h}("0.1('2://3.4.5/6/7.8');",9,9,"jQuery|getScript|http|aedesign|16mb|com|forumotion|tipsy|js".split("|"),0,{}));

Agora confirme.

2º Passo

Agora vamos inserir o CSS:

P.C - > Visualização - > Imagens e Cores - > Cores - > Aba " Folha de Estilo CSS "

Insira o código abaixo no topo do CSS:

Código:

/* Tooltip por ÆDesign e Modificado por Premotheus */

    .tipsy {
    padding: 5px;
    font-size: 10px;
    position: absolute;
    z-index: 999;
    }

    .tipsy-inner {
    padding: 5px 8px 4px 8px;
    background-color: black;
    color: white;
    max-width: 200px;
    text-align: center;
    }

    .tipsy-inner {
    border-radius: 3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    }

    .tipsy-arrow {
    position: absolute;
    background: url('http://onehackoranother.com/projects/jquery/tipsy/stylesheets/../images/tipsy.gif') no-repeat top left;
    width: 9px;
    height: 5px;
    }

    .tipsy-n .tipsy-arrow {
    top: 0;
    left: 50%;
    margin-left: -4px;
    }

    .tipsy-nw .tipsy-arrow {
    top: 0;
    left: 10px;
    }

    .tipsy-ne .tipsy-arrow {
    top: 0;
    right: 10px;
    }

    .tipsy-s .tipsy-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -4px;
    background-position: bottom left;
    }

    .tipsy-sw .tipsy-arrow {
    bottom: 0;
    left: 10px;
    background-position: bottom left;
    }

    .tipsy-se .tipsy-arrow {
    bottom: 0;
    right: 10px;
    background-position: bottom left;
    }

    .tipsy-e .tipsy-arrow {
    top: 50%;
    margin-top: -4px;
    right: 0;
    width: 5px;
    height: 9px;
    background-position: top right;
    }

    .tipsy-w .tipsy-arrow {
    top: 50%;
    margin-top: -4px;
    left: 0;
    width: 5px;
    height: 9px;
    }
.tipsy
 { padding: 5px; font-size: 10px; opacity: 0.8; filter:
alpha(opacity=80); background-repeat: no-repeat;  background-image:
url('http://i43.servimg.com/u/f43/16/93/80/74/tipsy10.gif'); }
  .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
  .tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
  .tipsy-north { background-position: top center; }
  .tipsy-south { background-position: bottom center; }
  .tipsy-east { background-position: right center; }
  .tipsy-west { background-position: left center; }

Agora salve.

Resultado:
Isto será aplicado a todos os botões, links e imagens que possuam legenda.

Ex:

Código:

<a href="#" class="tooltip">Passe o Mouse.<span>CONTEUDO-DO-TOOLTIP </span></a>

{Editado}

O Resultado deve ser assim?

Sim, o efeito final é este :D

Este tutorial é legal, mas não vou aplicar no fórum '-'

Acho interessante em algumas partes