Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Código tooltips

2 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

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

Tópico resolvido Código tooltips

Mensagem por Mauricio Molina 26.06.13 19:12

Qual é minha questão:
Ola...

Estou com este código tooltps, para colocar em meu fórum, mas gostaria de dar uma melhora no visual da caixa que aparece, mas sinceramente não sei fazer isso, alguém pode me ajudar?

Gostaria que o quadrado ficasse parecido com esta imagem:

Código tooltips Ln6d

Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>tooltip</title>
<style type="text/css">
<!--
a.dcontexto {
 position: relative;
 font: 12px arial, verdana, helvetica, sans-serif;
 padding: 0;
 color: #039;
 text-decoration: none;
 cursor: help;
 z-index: 24;
}
a.dcontexto:hover {
 background: transparent;
 z-index: 25;
}
a.dcontexto span {
 display: none;
}
a.dcontexto:hover span {
 display: block;
 position: absolute;
 width: 230px;
 top: 0em;
 text-align: justify;
 left: 6em;
 font: 10px Verdana, arial, helvetica, sans-serif;
 padding: 5px 10px;
 border: 1px solid #999;
 background: #95e4fe;
 color: #000000;
}
-->
</style>
</head>
<body>
<a href="#" class="dcontexto"><img src="http://imageshack.us/a/img62/3250/interrogacao.png"/><br/><span>bla bla bla bla</span></a>
</body>

</html>

Obrigado!


Endereço do meu fórum:
http://aquapeixes.forumeiros.com

Versão do fórum:
PHPBB3
Mauricio Molina

Mauricio Molina
Membro

Membro desde : 22/09/2009
Mensagens : 993
Pontos : 1429

http://aquapeixes.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Tópico resolvido Re: Código tooltips

Mensagem por MateusA 26.06.13 19:40

Olá!

Querido, você quer que fique parecido com a imagem? sugiro por a imagem de fundo, basta redimensiona-la.
É bem simples, basta fazer os procedimentos abaixo:

Código:
seletor {
background: url(http://img802.imageshack.us/img802/7198/ln6d.png) no-repeat;
width: 160px;
height: 35px;
}

Seta Basta substituir o seletor pela class.
Seta Ou se preferir o código feito:

Código:
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>tooltip</title>
        <style type="text/css">
        <!--
        a.dcontexto {
        position: relative;
        font: 12px arial, verdana, helvetica, sans-serif;
        padding: 0;
        color: #039;
        text-decoration: none;
        cursor: help;
        z-index: 24;
        }
        a.dcontexto:hover {
        background: transparent;
        z-index: 25;
        }
        a.dcontexto span {
        display: none;
        }
        a.dcontexto:hover span {
        display: block;
        position: absolute;
        top: 0em;
        text-align: justify;
        left: 10px;
        font: 17px Verdana, arial, helvetica, sans-serif;
        padding: 5px 10px;
        background: url(http://img802.imageshack.us/img802/7198/ln6d.png) no-repeat;
width: 160px;
height: 70px;
        color: #000000;
        }
        -->
        </style>
        </head>
        <body>
        <a href="#" class="dcontexto"><img src="http://imageshack.us/a/img62/3250/interrogacao.png"/><br/><span>bla bla bla bla</span></a>
        </body>

        </html>

Até mais.
MateusA

MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Código tooltips

Mensagem por Mauricio Molina 26.06.13 21:29

Não resultou amigo, utilizei o código inteiro...

Mauricio Molina

Mauricio Molina
Membro

Membro desde : 22/09/2009
Mensagens : 993
Pontos : 1429

http://aquapeixes.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

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

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

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