Como fazer um tooltip igual a esse?

2 participantes

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

Tópico resolvido Como fazer um tooltip igual a esse?

Mensagem por ByC 17.03.13 20:15

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 21:34, editado 1 vez(es)
ByC

ByC
*

Membro desde : 29/01/2009
Mensagens : 42
Pontos : 54

http://www.Hogwartsonline.forumeiros.org

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como fazer um tooltip igual a esse?

Mensagem por Konai 17.03.13 20:21

Olá querido,

O código CSS, é este:
Código:
.thumbnail{position:relative;z-index:0}.thumbnail:hover{background-image: url(http://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png)}.thumbnail span{-moz-border-radius:10px;-webkit-border-radius:10px;background-image:url(http://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png)}.thumbnail span{-moz-border-radius:10px;-webkit-border-radius:10px;background-image:url(http://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como fazer um tooltip igual a esse?

Mensagem por ByC 17.03.13 20:26

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

ByC
*

Membro desde : 29/01/2009
Mensagens : 42
Pontos : 54

http://www.Hogwartsonline.forumeiros.org

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como fazer um tooltip igual a esse?

Mensagem por Konai 17.03.13 20:27

Olá querido,

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

Até mais. Piscada
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como fazer um tooltip igual a esse?

Mensagem por ByC 17.03.13 20:31

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.
ByC

ByC
*

Membro desde : 29/01/2009
Mensagens : 42
Pontos : 54

http://www.Hogwartsonline.forumeiros.org

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como fazer um tooltip igual a esse?

Mensagem por Konai 17.03.13 20:53

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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png)}.thumbnail span{-moz-border-radius:10px;-webkit-border-radius:10px;background-image:url(http://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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://i1082.photobucket.com/albums/j365/Katuyama/Fundo-3.png);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
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como fazer um tooltip igual a esse?

Mensagem por ByC 17.03.13 20:59

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!
ByC

ByC
*

Membro desde : 29/01/2009
Mensagens : 42
Pontos : 54

http://www.Hogwartsonline.forumeiros.org

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como fazer um tooltip igual a esse?

Mensagem por Konai 17.03.13 21:19

Olá querido,

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

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos