Como fazer um tooltip igual a esse?

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Como fazer um tooltip igual a esse?

Mensagem por ByC em 17/03/13, 05:15 pm

Qual é minha questão:
Eu gostaria de fazer um tooltip igual a esse que mostra na área "Administradores", no inicio do fórum. Mas no lugar de passar o mouse sobre uma imagem, eu gostaria que fosse só um texto. Quais códigos devo usar?

Fórum onde vi o tooltip >> http://www.institutodurmstrangr.com/

Endereço do meu fórum:
http://www.hogwartsonline.forumeiros.org

Versão do fórum:
PHPBB2


Última edição por ByC em 17/03/13, 06:34 pm, editado 1 vez(es)
avatar

ByC
Nível 5

Masculino
Inscrito dia : 29/01/2009
Mensagens : 42
Pontos Ativos : 54

Ver perfil do usuário http://www.Hogwartsonline.forumeiros.org

Resolvido Re: Como fazer um tooltip igual a esse?

Mensagem por Gaaratsu em 17/03/13, 05:21 pm

Olá querido,

O código CSS, é este:
Código:
.thumbnail{position:relative;z-index:0}.thumbnail:hover{background-image: url(http://illiweb.com/fa/pbucket.gif span{-moz-border-radius:10px;-webkit-border-radius:10px;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:2px solid grey;border-radius:10px;border-right:1px solid grey;left:-1000px;padding:10px;position:absolute;text-align:justify;text-decoration:none;visibility:hidden}.thumbnail:hover span{left:-140px;top:-90px;visibility:visible;width:135px}.p1{-moz-border-radius-bottomleft:50px;-moz-border-radius-bottomright:50px;-moz-box-shadow:0 0 5px #CFCFCF;-webkit-border-radius:0 0 50px 50px;-webkit-box-shadow:0 0 5px #CFCFCF;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:solid 3px #CFCFCF;border-left:solid 2px #CFCFCF;border-radius-bottomleft:50px;border-radius-bottomright:50px;border-right:solid 2px #CFCFCF;border-top:solid 2px #CFCFCF;box-shadow:0 0 5px #CFCFCF;color:#EFEFEF;font-size:19px;font-variant:small-caps;letter-spacing:2px;margin:4px 2px -5px;padding:4px 0 5px;text-align:center;text-shadow:1px 1px 1px #000}.p2{-moz-border-radius:20px;-moz-box-shadow:0 0 5px grey;-webkit-border-radius:20px;-webkit-box-shadow:0 0 5px grey;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:solid 5px #BACCD3;border-left:solid 3px #BACCD3;border-radius:20px;border-right:solid 3px #BACCD3;border-top:solid 5px #BACCD3;box-shadow:0 0 5px grey;margin-right:20px;padding:7px}.p3{border:dotted 2px #9F9F9F;margin:0 10px 0 0;padding:3px}.p4{-moz-border-radius:10px;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:2px solid #BFBFBF;border-left:1px solid #BFBFBF;border-radius:10px;margin:0 2px;padding:5px;text-align:justify}

.p5{-moz-border-radius:10px;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:2px solid #BFBFBF;border-radius:10px;border-right:1px solid #BFBFBF;margin:0 2px;padding:10px;text-align:justify}
.p6{-moz-border-radius:10px;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:2px solid #BFBFBF;border-left:1px solid #BFBFBF;border-radius:10px;border-right:1px solid #BFBFBF;margin:0 2px;padding:5px;text-align:justify}textarea.inputbox{background-color:#DFDFDF}.profilentour{-moz-border-radius:20px;-moz-box-shadow:0 0 5px #CFCFCF;-webkit-border-radius:20px;-webkit-box-shadow:0 0 5px #CFCFCF;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:solid 5px #BACCD3;border-left:solid 3px #BACCD3;border-radius:20px;border-right:solid 3px #BACCD3;border-top:solid 5px #BACCD3;box-shadow:0 0 5px #CFCFCF;margin:15px 3px -9px;padding:3px 7px 7px;text-align:center!important}.avatarentour{-moz-border-radius:4px;-moz-box-shadow:0 0 5px #707070;-webkit-border-radius:4px;-webkit-box-shadow:0 0 5px #707070;background-image:url(http://img217.imageshack.us/img217/9863/fondprofil.png);border-radius:4px;box-shadow:0 0 5px #707070;margin-bottom:7px;padding:5px}.profilentinfos{-moz-border-radius:20px;-moz-box-shadow:0 0 5px #CFCFCF;-webkit-border-radius:20px;-webkit-box-shadow:0 0 5px #CFCFCF;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:solid 5px #BACCD3;border-left:solid 3px #BACCD3;border-right:solid 3px #BACCD3;border-top:solid 5px #BACCD3;box-shadow:0 0 5px #CFCFCF;margin:0 3px;padding:8px 7px 10px;text-align:center}

E o código da Home page, daquele local, é este:
Código:
<td><div style="font-family: Century Gothic;" class="p5"><div style="position: relative; bottom: 25px; text-shadow: 1px 1px 1px black; letter-spacing: 2px; text-align: center; width: 220px; margin-bottom: -17px; font-variant: small-caps; color:#adadad;"><font size="5">Administradores</font></div><div style="text-align: center;"><center><br><br><br><br><div style="text-align: center;"><center></center></div><table><tbody><tr><td><div class="thumbnail"><a onmouseover="dimitri.src='http://i13.servimg.com/u/f13/17/09/12/27/kellan10.jpg'" onmouseout="dimitri.src='http://i13.servimg.com/u/f13/17/09/12/27/kellan11.jpg'"><div style="margin-top: -3px;"><img name="dimitri" alt="" src="http://i13.servimg.com/u/f13/17/09/12/27/kellan10.jpg " height="48" border="0" width="88"></div></a>
<span style="color: rgb(239, 239, 239);"><div class="tstaff" align="center"><div class="name" style="letter-spacing: 5px; font-variant: Century Gothic; margin-bottom: -1px;"><font size="3"><b>Ethan P. Grunnins</b></font></div><font size="1"><div style="color: rgb(255, 255, 255);"> </div></font><br><div style="width: 100px; border: 2px dotted rgb(159, 159, 159); padding: 3px; margin: 10px 0px;"><img src=" http://i13.servimg.com/u/f13/17/09/12/27/kellan12.jpg "></div><div style="letter-spacing: 3px; font-variant: small-caps; color:#ffffff;"><b>Administrador Geral</b></div><a href="http://www.institutodurmstrangr.com/privmsg?mode=post&u=1">MP</a> — <a href=" http://www.institutodurmstrangr.com/u1 ">Perfil</a></div></span></div></td>
</tr></tbody></table><br><br><br><br><div style="text-align: center;"><center></center></div><table><tbody><tr><td><div class="thumbnail"><a onmouseover="dimitri.src='http://i13.servimg.com/u/f13/17/09/12/27/image10.png'" onmouseout="dimitri.src='http://i13.servimg.com/u/f13/17/09/12/27/image11.png '"><div style="margin-top: -3px;"><img name="dimitri" alt="" src="http://i13.servimg.com/u/f13/17/09/12/27/image10.png " height="48" border="0" width="88"></div></a>
<span style="color: rgb(239, 239, 239);"><div class="tstaff" align="center"><div class="name" style="letter-spacing: 5px; font-variant: Century Gothic; margin-bottom: -1px;"><font size="3"><b> Conrad K. Pundfoot </b></font></div><font size="1"><div style="color: rgb(255, 255, 255);"> </div></font><br><div style="width: 100px; border: 2px dotted rgb(159, 159, 159); padding: 3px; margin: 10px 0px;"><img src="http://i13.servimg.com/u/f13/17/09/12/27/image12.png"></div><div style="letter-spacing: 3px; font-variant: small-caps; color:#ffffff;"><b>Administrador Geral</b></div><a href="http://www.institutodurmstrangr.com/privmsg?mode=post&u=6">MP</a> — <a href="http://www.institutodurmstrangr.com/u6">Perfil</a></div></span></div></td>
</tr></tbody></table><br><br><br><br><div style="text-align: center;"><center></center></div><table><tbody><tr><td><div class="thumbnail"><a onmouseover="dimitri.src='http://i13.servimg.com/u/f13/17/09/12/27/image13.png'" onmouseout="dimitri.src='http://i13.servimg.com/u/f13/17/09/12/27/image14.png'"><div style="margin-top: -3px;"><img name="dimitri" alt="" src="http://i13.servimg.com/u/f13/17/09/12/27/image13.png" height="48" border="0" width="88"></div></a>
<span style="color: rgb(239, 239, 239);"><div class="tstaff" align="center"><div class="name" style="letter-spacing: 5px; font-variant: Century Gothic; margin-bottom: -1px;"><font size="3"><b>Matheus Van Rousseau</b></font></div><font size="1"><div style="color: rgb(255, 255, 255);"> </div></font><br><div style="width: 100px; border: 2px dotted rgb(159, 159, 159); padding: 3px; margin: 10px 0px;"><img src="http://i13.servimg.com/u/f13/17/09/12/27/image15.png"></div><div style="letter-spacing: 3px; font-variant: small-caps; color:#ffffff;"><b>Administrador Geral  &  Supervisor Geral </b></div><a href="http://www.institutodurmstrangr.com/privmsg?mode=post&u=839">MP</a> — <a href="http://www.institutodurmstrangr.com/u839">Perfil</a></div></span></div></td>
</tr></tbody></table><table><tbody><tr><td><div class="thumbnail"><a onmouseover="dimitri.src='http://i13.servimg.com/u/f13/17/09/12/27/image16.png'" <br=""><br><br><br></a></div><a onmouseover="dimitri.src='http://i13.servimg.com/u/f13/17/09/12/27/image16.png'" <br="">


<style ="css"="">
.thumbnail{position:relative;z-index:0}.thumbnail:hover{background-image: url(http://illiweb.com/fa/pbucket.gif span{-moz-border-radius:10px;-webkit-border-radius:10px;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:2px solid grey;border-radius:10px;border-right:1px solid grey;left:-1000px;padding:10px;position:absolute;text-align:justify;text-decoration:none;visibility:hidden}.thumbnail:hover span{left:-140px;top:-90px;visibility:visible;width:135px}.p1{-moz-border-radius-bottomleft:50px;-moz-border-radius-bottomright:50px;-moz-box-shadow:0 0 5px #CFCFCF;-webkit-border-radius:0 0 50px 50px;-webkit-box-shadow:0 0 5px #CFCFCF;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:solid 3px #CFCFCF;border-left:solid 2px #CFCFCF;border-radius-bottomleft:50px;border-radius-bottomright:50px;border-right:solid 2px #CFCFCF;border-top:solid 2px #CFCFCF;box-shadow:0 0 5px #CFCFCF;color:#EFEFEF;font-size:19px;font-variant:small-caps;letter-spacing:2px;margin:4px 2px -5px;padding:4px 0 5px;text-align:center;text-shadow:1px 1px 1px #000}.p2{-moz-border-radius:20px;-moz-box-shadow:0 0 5px grey;-webkit-border-radius:20px;-webkit-box-shadow:0 0 5px grey;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:solid 5px #BACCD3;border-left:solid 3px #BACCD3;border-radius:20px;border-right:solid 3px #BACCD3;border-top:solid 5px #BACCD3;box-shadow:0 0 5px grey;margin-right:20px;padding:7px}.p3{border:dotted 2px #9F9F9F;margin:0 10px 0 0;padding:3px}.p4{-moz-border-radius:10px;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:2px solid #BFBFBF;border-left:1px solid #BFBFBF;border-radius:10px;margin:0 2px;padding:5px;text-align:justify}

.p5{-moz-border-radius:10px;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:2px solid #BFBFBF;border-radius:10px;border-right:1px solid #BFBFBF;margin:0 2px;padding:10px;text-align:justify}
.p6{-moz-border-radius:10px;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:2px solid #BFBFBF;border-left:1px solid #BFBFBF;border-radius:10px;border-right:1px solid #BFBFBF;margin:0 2px;padding:5px;text-align:justify}textarea.inputbox{background-color:#DFDFDF}.profilentour{-moz-border-radius:20px;-moz-box-shadow:0 0 5px #CFCFCF;-webkit-border-radius:20px;-webkit-box-shadow:0 0 5px #CFCFCF;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:solid 5px #BACCD3;border-left:solid 3px #BACCD3;border-radius:20px;border-right:solid 3px #BACCD3;border-top:solid 5px #BACCD3;box-shadow:0 0 5px #CFCFCF;margin:15px 3px -9px;padding:3px 7px 7px;text-align:center!important}.avatarentour{-moz-border-radius:4px;-moz-box-shadow:0 0 5px #707070;-webkit-border-radius:4px;-webkit-box-shadow:0 0 5px #707070;background-image:url(http://img217.imageshack.us/img217/9863/fondprofil.png);border-radius:4px;box-shadow:0 0 5px #707070;margin-bottom:7px;padding:5px}.profilentinfos{-moz-border-radius:20px;-moz-box-shadow:0 0 5px #CFCFCF;-webkit-border-radius:20px;-webkit-box-shadow:0 0 5px #CFCFCF;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:solid 5px #BACCD3;border-left:solid 3px #BACCD3;border-right:solid 3px #BACCD3;border-top:solid 5px #BACCD3;box-shadow:0 0 5px #CFCFCF;margin:0 3px;padding:8px 7px 10px;text-align:center}
</style>
</a></td></tr></tbody></table></center></div></div></td>

Basta adicionar na sua Home Page e ir personalizando.

Até mais. Piscada


HAKUOUKI

               
   
Respeite as Regras Gerais do Fórum e conheça a nossa Equipe;
   Veja a Lista de FAQs do CPainel e Lista de Tutoriais;
   Ferramentas do(a) Administrador(a);
   Assinalar um Litígio.

   
   


   "Seria o único propósito da folha, o de cair?".

   
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 5948
Pontos Ativos : 7429

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Como fazer um tooltip igual a esse?

Mensagem por ByC em 17/03/13, 05:26 pm

Devo adicionar os dois códigos? Ou só HTML serve?
avatar

ByC
Nível 5

Masculino
Inscrito dia : 29/01/2009
Mensagens : 42
Pontos Ativos : 54

Ver perfil do usuário http://www.Hogwartsonline.forumeiros.org

Resolvido Re: Como fazer um tooltip igual a esse?

Mensagem por Gaaratsu em 17/03/13, 05:27 pm

Olá querido,

Apenas o HTML serve, pois já adicionei o estilo no código HTML.

Até mais. Piscada
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 5948
Pontos Ativos : 7429

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Como fazer um tooltip igual a esse?

Mensagem por ByC em 17/03/13, 05:31 pm

Não está dando certo. '-' Aparece as imagens, mas quando passo o mouse em cima, não aparece o balão com as informações.
avatar

ByC
Nível 5

Masculino
Inscrito dia : 29/01/2009
Mensagens : 42
Pontos Ativos : 54

Ver perfil do usuário http://www.Hogwartsonline.forumeiros.org

Resolvido Re: Como fazer um tooltip igual a esse?

Mensagem por Gaaratsu em 17/03/13, 05:53 pm

Olá querido,

Tente substituir por este:
Código:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"><tbody><tr><td class="row1" rowspan="3" align="center" valign="middle"><div class="gensmall"><br>
<table style="text-align: left; margin-left: auto; margin-right: auto;"><tbody><tr><td><div style="margin-right: 20px;" class="p4"><div style="position: relative; bottom: 22px; text-shadow: 1px 1px 1px black; letter-spacing: 2px; text-align: center; width: 230px; margin-bottom: -17px; font-variant: century gothic; color:#adadad;"><font size="5">Links Rápidos</font></div><div id="subnav"><a href="http://www.institutodurmstrangr.com/f1-regras-e-tutoriais" title="Ler as regras" target="_blank">Regras e Tutoriais</a></div><div id="subnav"><a href="http://www.institutodurmstrangr.com/f7-cartorio" target="_blank" title="Registre-se">Registros em Geral</a></div><div id="subnav"><a href="http://www.institutodurmstrangr.com/t1111-matricula" title="Matricule-se no Instituto" target="_blank">Matricule-se no IPD</a></div><div id="subnav"><a href="http://www.institutodurmstrangr.com/f3-trama-do-rpg" title="Leia nossa trama" target="_blank">Trama</a></div><div id="subnav"><a href="http://www.institutodurmstrangr.com/f40-sugestoes-e-reclamacoes" target="_blank" title="Dê suas sugestões ou reclame de algo">Sugestões e Reclamações</a></div></div></td>


<td><div style="margin-right: 20px; width: 305px;" class="p6"><div style="position: relative; bottom: 22px; text-shadow: 1px 1px 1px black; letter-spacing: 2px; text-align: center; width: 300px; margin-bottom: -20px; font-variant: Century Gothic; color:#adadad;"><font size="5">Novidades</font></div><div style="padding: 0px 7px 5px;">
<br><strong>-</strong> Crie sua conta no Gringotes, clique <a href="http://www.institutodurmstrangr.com/f88-banco-gringotes-sede-internacional?tid=14e8d3f2e2efd65534852e94d63f0958" class="postlink">aqui!</a>.<br><strong>-</strong> Quarta Feira será divulgado os novos adms..<br><strong><strong>-</strong> O calendário referente ao mês de janeiro já foi postado.</strong><br> <strong><strong>-</strong> Não perca, dia 05 de Janeiro reabertura do RPG!</strong></div>

</div></td><td><div class="p5" style="width: 220px;"><div style="position: relative; bottom: 25px; text-align: center; text-shadow: 1px 1px 1px black; letter-spacing: 2px; margin-bottom: -22px; font-variant: Century Gothic; color:#adadad;"><font size="5">Competições</font></div><div style="text-align: justify;">Em breve...</div></div></td></tr></tbody></table>



<br><br>


<table style="text-align: left; margin-left: auto; margin-right: auto;"><tbody><tr><td><div class="p4">
          <div style="position: relative; bottom: 20px; text-shadow: 1px 1px 1px black; letter-spacing: 2px; text-align: center; width: 230px; margin-bottom: -10px; font-variant: Century Gothic; color:#adadad;"><font size="5">Data e Clima</font></div><div style="text-align: center; width:150px; font-size:9px;">
    Dia 25 de Janeiro de 1999 . 19 C°
</div></div></td>


<td><div style="margin-right: 35px; margin-left: 35px; padding-bottom: 10px;" class="p6"><div style="position: relative; bottom: 22px; text-shadow: 1px 1px 1px black; letter-spacing: 2px; text-align: center; width: 273px; margin-bottom: -17px; font-variant: Century Gothic; color: #adadad;"><font size="5">Créditos</font></div> Todo e qualquer conteúdo deste fórum fora criado e editado pelos administradores do mesmo. Ao utilizar de algo que não nos pertença terá como principal observação final os devidos CRÉDITOS. <table><tbody style="text-align: center;"><tr><td></td><td>
 
</td>
</tr></tbody></table></div></td>

<td><div style="font-family: Century Gothic;" class="p5"><div style="position: relative; bottom: 25px; text-shadow: 1px 1px 1px black; letter-spacing: 2px; text-align: center; width: 220px; margin-bottom: -17px; font-variant: small-caps; color:#adadad;"><font size="5">Administradores</font></div><div style="text-align: center;"><center><br><br><br><br><div style="text-align: center;"><center></center></div><table><tbody><tr><td><div class="thumbnail"><a onmouseover="dimitri.src='http://i13.servimg.com/u/f13/17/09/12/27/kellan10.jpg'" onmouseout="dimitri.src='http://i13.servimg.com/u/f13/17/09/12/27/kellan11.jpg'"><div style="margin-top: -3px;"><img name="dimitri" alt="" src="http://i13.servimg.com/u/f13/17/09/12/27/kellan10.jpg " height="48" border="0" width="88"></div></a>
<span style="color: rgb(239, 239, 239);"><div class="tstaff" align="center"><div class="name" style="letter-spacing: 5px; font-variant: Century Gothic; margin-bottom: -1px;"><font size="3"><b>Ethan P. Grunnins</b></font></div><font size="1"><div style="color: rgb(255, 255, 255);"> </div></font><br><div style="width: 100px; border: 2px dotted rgb(159, 159, 159); padding: 3px; margin: 10px 0px;"><img src=" http://i13.servimg.com/u/f13/17/09/12/27/kellan12.jpg "></div><div style="letter-spacing: 3px; font-variant: small-caps; color:#ffffff;"><b>Administrador Geral</b></div><a href="http://www.institutodurmstrangr.com/privmsg?mode=post&u=1">MP</a> — <a href=" http://www.institutodurmstrangr.com/u1 ">Perfil</a></div></span></div></td>
</tr></tbody></table><br><br><br><br><div style="text-align: center;"><center></center></div><table><tbody><tr><td><div class="thumbnail"><a onmouseover="dimitri.src='http://i13.servimg.com/u/f13/17/09/12/27/image10.png'" onmouseout="dimitri.src='http://i13.servimg.com/u/f13/17/09/12/27/image11.png '"><div style="margin-top: -3px;"><img name="dimitri" alt="" src="http://i13.servimg.com/u/f13/17/09/12/27/image10.png " height="48" border="0" width="88"></div></a>
<span style="color: rgb(239, 239, 239);"><div class="tstaff" align="center"><div class="name" style="letter-spacing: 5px; font-variant: Century Gothic; margin-bottom: -1px;"><font size="3"><b> Conrad K. Pundfoot </b></font></div><font size="1"><div style="color: rgb(255, 255, 255);"> </div></font><br><div style="width: 100px; border: 2px dotted rgb(159, 159, 159); padding: 3px; margin: 10px 0px;"><img src="http://i13.servimg.com/u/f13/17/09/12/27/image12.png"></div><div style="letter-spacing: 3px; font-variant: small-caps; color:#ffffff;"><b>Administrador Geral</b></div><a href="http://www.institutodurmstrangr.com/privmsg?mode=post&u=6">MP</a> — <a href="http://www.institutodurmstrangr.com/u6">Perfil</a></div></span></div></td>
</tr></tbody></table><br><br><br><br><div style="text-align: center;"><center></center></div><table><tbody><tr><td><div class="thumbnail"><a onmouseover="dimitri.src='http://i13.servimg.com/u/f13/17/09/12/27/image13.png'" onmouseout="dimitri.src='http://i13.servimg.com/u/f13/17/09/12/27/image14.png'"><div style="margin-top: -3px;"><img name="dimitri" alt="" src="http://i13.servimg.com/u/f13/17/09/12/27/image13.png" height="48" border="0" width="88"></div></a>
<span style="color: rgb(239, 239, 239);"><div class="tstaff" align="center"><div class="name" style="letter-spacing: 5px; font-variant: Century Gothic; margin-bottom: -1px;"><font size="3"><b>Matheus Van Rousseau</b></font></div><font size="1"><div style="color: rgb(255, 255, 255);"> </div></font><br><div style="width: 100px; border: 2px dotted rgb(159, 159, 159); padding: 3px; margin: 10px 0px;"><img src="http://i13.servimg.com/u/f13/17/09/12/27/image15.png"></div><div style="letter-spacing: 3px; font-variant: small-caps; color:#ffffff;"><b>Administrador Geral  &  Supervisor Geral </b></div><a href="http://www.institutodurmstrangr.com/privmsg?mode=post&u=839">MP</a> — <a href="http://www.institutodurmstrangr.com/u839">Perfil</a></div></span></div></td>
</tr></tbody></table><table><tbody><tr><td><div class="thumbnail"><a onmouseover="dimitri.src='http://i13.servimg.com/u/f13/17/09/12/27/image16.png'" <br=""><br><br><br></a></div><a onmouseover="dimitri.src='http://i13.servimg.com/u/f13/17/09/12/27/image16.png'" <br="">


<style ="css"="">
.thumbnail{position:relative;z-index:0}.thumbnail:hover{background-image: url(http://illiweb.com/fa/pbucket.gif span{-moz-border-radius:10px;-webkit-border-radius:10px;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:2px solid grey;border-radius:10px;border-right:1px solid grey;left:-1000px;padding:10px;position:absolute;text-align:justify;text-decoration:none;visibility:hidden}.thumbnail:hover span{left:-140px;top:-90px;visibility:visible;width:135px}.p1{-moz-border-radius-bottomleft:50px;-moz-border-radius-bottomright:50px;-moz-box-shadow:0 0 5px #CFCFCF;-webkit-border-radius:0 0 50px 50px;-webkit-box-shadow:0 0 5px #CFCFCF;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:solid 3px #CFCFCF;border-left:solid 2px #CFCFCF;border-radius-bottomleft:50px;border-radius-bottomright:50px;border-right:solid 2px #CFCFCF;border-top:solid 2px #CFCFCF;box-shadow:0 0 5px #CFCFCF;color:#EFEFEF;font-size:19px;font-variant:small-caps;letter-spacing:2px;margin:4px 2px -5px;padding:4px 0 5px;text-align:center;text-shadow:1px 1px 1px #000}.p2{-moz-border-radius:20px;-moz-box-shadow:0 0 5px grey;-webkit-border-radius:20px;-webkit-box-shadow:0 0 5px grey;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:solid 5px #BACCD3;border-left:solid 3px #BACCD3;border-radius:20px;border-right:solid 3px #BACCD3;border-top:solid 5px #BACCD3;box-shadow:0 0 5px grey;margin-right:20px;padding:7px}.p3{border:dotted 2px #9F9F9F;margin:0 10px 0 0;padding:3px}.p4{-moz-border-radius:10px;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:2px solid #BFBFBF;border-left:1px solid #BFBFBF;border-radius:10px;margin:0 2px;padding:5px;text-align:justify}

.p5{-moz-border-radius:10px;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:2px solid #BFBFBF;border-radius:10px;border-right:1px solid #BFBFBF;margin:0 2px;padding:10px;text-align:justify}
.p6{-moz-border-radius:10px;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:2px solid #BFBFBF;border-left:1px solid #BFBFBF;border-radius:10px;border-right:1px solid #BFBFBF;margin:0 2px;padding:5px;text-align:justify}textarea.inputbox{background-color:#DFDFDF}.profilentour{-moz-border-radius:20px;-moz-box-shadow:0 0 5px #CFCFCF;-webkit-border-radius:20px;-webkit-box-shadow:0 0 5px #CFCFCF;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:solid 5px #BACCD3;border-left:solid 3px #BACCD3;border-radius:20px;border-right:solid 3px #BACCD3;border-top:solid 5px #BACCD3;box-shadow:0 0 5px #CFCFCF;margin:15px 3px -9px;padding:3px 7px 7px;text-align:center!important}.avatarentour{-moz-border-radius:4px;-moz-box-shadow:0 0 5px #707070;-webkit-border-radius:4px;-webkit-box-shadow:0 0 5px #707070;background-image:url(http://img217.imageshack.us/img217/9863/fondprofil.png);border-radius:4px;box-shadow:0 0 5px #707070;margin-bottom:7px;padding:5px}.profilentinfos{-moz-border-radius:20px;-moz-box-shadow:0 0 5px #CFCFCF;-webkit-border-radius:20px;-webkit-box-shadow:0 0 5px #CFCFCF;background-image:url(http://illiweb.com/fa/pbucket.gif);border-bottom:solid 5px #BACCD3;border-left:solid 3px #BACCD3;border-right:solid 3px #BACCD3;border-top:solid 5px #BACCD3;box-shadow:0 0 5px #CFCFCF;margin:0 3px;padding:8px 7px 10px;text-align:center}
</style>
</a></td></tr></tbody></table></center></div></div></td></tr></tbody></table>
</div></td></tr></tbody></table>

Até mais. Piscada


HAKUOUKI

               
   
Respeite as Regras Gerais do Fórum e conheça a nossa Equipe;
   Veja a Lista de FAQs do CPainel e Lista de Tutoriais;
   Ferramentas do(a) Administrador(a);
   Assinalar um Litígio.

   
   


   "Seria o único propósito da folha, o de cair?".

   
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 5948
Pontos Ativos : 7429

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Como fazer um tooltip igual a esse?

Mensagem por ByC em 17/03/13, 05:59 pm

Não é isso que quero. Preciso, somente, do tooltip!
Se souber uma forma mais fácil de fazer, também serve. O que eu realmente quero é: EX: "AMOR" << Quando eu passasse o mouse sobre a palavra apareceria um balão, e neste balão haveria a imagem de um coração com uma breve descrição embaixo. Tudo dentro do balão!
avatar

ByC
Nível 5

Masculino
Inscrito dia : 29/01/2009
Mensagens : 42
Pontos Ativos : 54

Ver perfil do usuário http://www.Hogwartsonline.forumeiros.org

Resolvido Re: Como fazer um tooltip igual a esse?

Mensagem por Gaaratsu em 17/03/13, 06:19 pm

Olá querido,

Leia a última mensagem deste tópico:
Até mais. Piscada


HAKUOUKI

               
   
Respeite as Regras Gerais do Fórum e conheça a nossa Equipe;
   Veja a Lista de FAQs do CPainel e Lista de Tutoriais;
   Ferramentas do(a) Administrador(a);
   Assinalar um Litígio.

   
   


   "Seria o único propósito da folha, o de cair?".

   
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 5948
Pontos Ativos : 7429

Ver perfil do usuário http://narutongo.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum