Código tooltips

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

Resolvido Código tooltips

Mensagem por Mauricio Molina em 26/06/13, 03:12 pm

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:
<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
avatar

Mauricio Molina
Usuário destaque

Masculino
Inscrito dia : 22/09/2009
Mensagens : 988
Pontos Ativos : 1422

Ver perfil do usuário http://aquapeixes.forumeiros.com/forum.htm

Resolvido Re: Código tooltips

Mensagem por MateusA em 26/06/13, 03:40 pm

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

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Código tooltips

Mensagem por Mauricio Molina em 26/06/13, 05:29 pm

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

avatar

Mauricio Molina
Usuário destaque

Masculino
Inscrito dia : 22/09/2009
Mensagens : 988
Pontos Ativos : 1422

Ver perfil do usuário http://aquapeixes.forumeiros.com/forum.htm

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