Mostrar imagem

Qual é minha questão:
Alguém podia me ceder algum código cuja função seja: Ao usuário colocar o cursor em cima do link mostrar uma zona de texto.. tipo a imagem.

https://i.imgur.com/RWeH1lA.png

Endereço do meu fórum:
http://sword-art-online.forumeiros.com

Versão do fórum:
PHPBB3

Olá!
Leia este tópico:
[TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB)

Até mais.

BrunoH. escreveu:Olá!
Leia este tópico:
[TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB)

Até mais.

Queria um HTML que mostrasse uma zona de texto, quando colocarem o mouse sobre o link, não sobre o perfil. Mas a do perfil será muito útil.

Olá,
Não pude compreender, poderia ser mais especifico?

Até mais.

BrunoH. escreveu:Olá,
Não pude compreender, poderia ser mais especifico?

Até mais.

Sabe o Mouse Hover ? Tipo o Top 5 na lateral do fórum ? Quando apenas coloca o mouse sobre a imagem aparece "Clique e Confira" ? É isso !

Olá,

Crie um novo JavaScript com o código abaixo

Código:

eval(function(h,b,i,d,g,f){g=function(a){return(a<b?"":g(parseInt(a/b)))+((a=a%b)>35?String.fromCharCode(a+29):a.toString(36))};if(!"".replace(/^/,String)){while(i--){f[g(i)]=d[i]||g(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}('(4(c){4 a(d){6(d.H("m")||G(d.H("Y-m"))!="T"){d.H("Y-m",d.H("m")||"").1I("m")}}4 b(e,d){3.$r=c(e);3.7=d;3.D=u;a(3.$r)}b.1F={10:4(){o g=3.1k();6(g&&3.D){o f=3.z();f.1C(".5-1h")[3.7.S?"S":"1x"](g);f[0].1u="5";f.W().M({q:0,9:0,11:"1t",13:"1d"}).1p(Q.1A);o j=c.X({},3.$r.x(),{A:3.$r[0].1b,F:3.$r[0].19});o d=f[0].1b,i=f[0].19;o h=(G 3.7.p=="4")?3.7.p.18(3.$r[0]):3.7.p;o e;1y(h.1e(0)){N"n":e={q:j.q+j.F+3.7.x,9:j.9+j.A/2-d/2};P;N"s":e={q:j.q-i-3.7.x,9:j.9+j.A/2-d/2};P;N"e":e={q:j.q+j.F/2-i/2,9:j.9-d-3.7.x};P;N"w":e={q:j.q+j.F/2-i/2,9:j.9+j.A+3.7.x};P}6(h.1w==2){6(h.1e(1)=="w"){e.9=j.9+j.A/2-15}C{e.9=j.9+j.A/2-d+15}}f.M(e).1z("5-"+h);6(3.7.t){f.16().M({E:0,13:"1d",11:"17"}).1Q({E:3.7.E})}C{f.M({11:"17",E:3.7.E})}}},K:4(){6(3.7.t){3.z().16().1r(4(){c(3).W()})}C{3.z().W()}},1k:4(){o f,d=3.$r,e=3.7;a(d);o f,e=3.7;6(G e.m=="T"){f=d.H(e.m=="m"?"Y-m":e.m)}C{6(G e.m=="4"){f=e.m.18(d[0])}}f=(""+f).1s(/(^\\s*|\\s*$)/,"");v f||e.1a},z:4(){6(!3.$z){3.$z=c(\'<y V="5"></y>\').S(\'<y V="5-1B"></y><y V="5-1h"/></y>\')}v 3.$z},1D:4(){6(!3.$r[0].1N){3.K();3.$r=1c;3.7=1c}},1n:4(){3.D=u},1o:4(){3.D=I},1q:4(){3.D=!3.D}};c.B.5=4(h){6(h===u){v 3.L("5")}C{6(G h=="T"){v 3.L("5")[h]()}}h=c.X({},c.B.5.1f,h);4 g(k){o l=c.L(k,"5");6(!l){l=1v b(k,c.B.5.14(k,h));c.L(k,"5",l)}v l}4 j(){o k=g(3);k.O="1g";6(h.12==0){k.10()}C{1i(4(){6(k.O=="1g"){k.10()}},h.12)}}4 f(){o k=g(3);k.O="1j";6(h.Z==0){k.K()}C{1i(4(){6(k.O=="1j"){k.K()}},h.Z)}}6(!h.R){3.1E(4(){g(3)})}6(h.J!="1G"){o d=h.R?"R":"1H",i=h.J=="U"?"1J":"1K",e=h.J=="U"?"1L":"1M";3[d](i,j)[d](e,f)}v 3};c.B.5.1f={12:0,Z:0,t:I,1a:"",p:"n",S:I,R:I,x:0,E:0.8,m:"m",J:"U"};c.B.5.14=4(e,d){v c.1l?c.X({},d,c(e).1l()):d};c.B.5.1O=4(){v c(3).x().q>(c(Q).1P()+c(1m).F()/2)?"s":"n"};c.B.5.1R=4(){v c(3).x().9>(c(Q).1S()+c(1m).A()/2)?"e":"w"}})(1T);$(Q).1U(4(){$(4(){$("a").5({t:u,p:"s"});$("y").5({t:u,p:"s"});$("1V").5({t:u,p:"s"});$("1W").5({t:u,p:"s"});$("1X").5({t:u,p:"s"});$("1Y").5({t:u,p:"s"})})});',62,123,"|||this|function|tipsy|if|options||left|||||||||||||title||var|gravity|top|element||fade|true|return||offset|div|tip|width|fn|else|enabled|opacity|height|typeof|attr|false|trigger|hide|data|css|case|hoverState|break|document|live|html|string|hover|class|remove|extend|original|delayOut|show|visibility|delayIn|display|elementOptions||stop|visible|call|offsetHeight|fallback|offsetWidth|null|block|charAt|defaults|in|inner|setTimeout|out|getTitle|metadata|window|enable|disable|appendTo|toggleEnabled|fadeOut|replace|hidden|className|new|length|text|switch|addClass|body|arrow|find|validate|each|prototype|manual|bind|removeAttr|mouseenter|focus|mouseleave|blur|parentNode|autoNS|scrollTop|animate|autoWE|scrollLeft|jQuery|ready|span|img|button|input".split("|"),0,{}));

Investimento: Em todas as páginas

Logo em seguida adicione o seguinte código em sua Folha de estilo 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; }


Até