[Resolvido] Como fazer efeito tooltip?

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

Resolvido [Resolvido] Como fazer efeito tooltip?

Mensagem por Bristol em Sex 24 Set 2010 - 21:59

Deste site: http://www.pixelaria.org/
Passe o mouse sobre uma foto
eu adoraria saber
avatar

Bristol
Nível 10

Masculino
Inscrito dia : 06/06/2010
Mensagens : 286
Pontos Ativos : 507

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

Resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por Convidad em Sab 25 Set 2010 - 0:16

Olá boa noite,

A que efeito se refere? Mostre com uma imagem.

Convidad
Convidado


Resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por ..Bruno.. em Sab 25 Set 2010 - 0:38

Olá,

Mr. Supero acho que ele está falando quando você passa o mouse encima dos menus (opção para comandos) e aparecerá umas outras opção, mais não sei responde,

Obrigado.
avatar

..Bruno..
Nível 7

Masculino
Inscrito dia : 24/09/2010
Mensagens : 86
Pontos Ativos : 101

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

Resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por Bristol em Sab 25 Set 2010 - 20:09

Com todo o respeito, o title que é a legenda que aparece quando vc deixa o mouse sobre algo, e muito simples de entender, mas aqui está uma foto:
avatar

Bristol
Nível 10

Masculino
Inscrito dia : 06/06/2010
Mensagens : 286
Pontos Ativos : 507

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

Resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por Steeph em Sab 25 Set 2010 - 20:39

Olá!
Bom, mexi bastante no site para descobrir, me parece mais Tooltip...
Porém não identifiquei a forma como fazer, desculpe. Vou continuar pesquisando...
Também achei o efeito interessante!
avatar

Steeph
Usuário experiente

Feminino
Inscrito dia : 08/03/2010
Mensagens : 2612
Pontos Ativos : 3503

Ver perfil do usuário http://www.kromusdesign.forumeiros.com http://www.twitter.com/ideasfromsteeph

Resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por JCMais em Sab 25 Set 2010 - 21:32

Eu sei como faz Muito feliz
Tenho em meu blog, esperem, vou pegar o código aqui e fazer as devidas modificações.

Lembrando que ele não pega o title da imagem, mas sim o title do link.
Ou seja:
Código:
<a href="#" title="Conteúdo que irá aparecer"><img src="#" alt="#" /></a>

Aqui está o código cru do jeito que está em meu blog, só é necessário fazer as devidas modificações:

O CSS:
Código:
div#qTip {
padding: 3px 3px 3px 16px;
border: 1px solid #0379b9;
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
background: url(http://illiweb.com/fa/pbucket.gif?t=1278546248) 5px 0px no-repeat white;
color: #31A309;
font: bold 9px Verdana, Arial, sans-serif;
text-align: left;
position: absolute;
z-index: 1000;
-Moz-border-radius: 15px 0px 15px 0px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 5px 2px 10px #31A309;
-webkit-box-shadow: 5px 2px 10px #31A309;
margin: 6px 0px 0px 0px;
max-width: 332px;
}

Os Scripts que são usados:
Código:
<!-- Jquery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<!-- Efeito ToolTip -->
<script language='JavaScript' src='http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js' type='text/JavaScript'/>

Não testei para ver se funciona em fóruns, façam por conta e risco.
Feliz
avatar

JCMais
Nível 9

Masculino
Inscrito dia : 02/07/2010
Mensagens : 202
Pontos Ativos : 243

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

Resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por Bristol em Qua 29 Set 2010 - 3:47

Descobriram mais algo?
avatar

Bristol
Nível 10

Masculino
Inscrito dia : 06/06/2010
Mensagens : 286
Pontos Ativos : 507

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

Resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por JCMais em Qua 29 Set 2010 - 4:10

@Bristol escreveu:Descobriram mais algo?
Veja meu fórum, no widget de "Últimos assuntos" posicione o mouse sobre os links. Feliz
Consegui colocar o efeito para funcionar.
avatar

JCMais
Nível 9

Masculino
Inscrito dia : 02/07/2010
Mensagens : 202
Pontos Ativos : 243

Ver perfil do usuário http://ajuda.forumeiros.com/
  • 0

Resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por burlador em Dom 3 Out 2010 - 13:32

alguem consegue fazer o efeito correr como mostra no site http://www.pixelaria.org/

axo k os scripts sao estes


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.pixelaria.org/media/scripts/general.js?1285892967"></script>
<script type="text/javascript" src="http://www.pixelaria.org/media/scripts/site.js?1285960513"></script>
<script type="text/javascript">
var logged = false;
var estrelado = false;
var current_timestamp = '1286101829';

Shadowbox.init({
handleOversize: 'drag',
animSequence: 'wh',
overlayColor: '#fff',
overlayOpacity: '0.6'
});
</script>


burlador
Nível 9

Masculino
Inscrito dia : 25/01/2010
Mensagens : 200
Pontos Ativos : 290

Ver perfil do usuário http://google.com

Resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por JCMais em Dom 3 Out 2010 - 17:45

Amigo espere pelo menos 24 horas antes de dar Up em seu tópico.
avatar

JCMais
Nível 9

Masculino
Inscrito dia : 02/07/2010
Mensagens : 202
Pontos Ativos : 243

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

Resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por .Danni. em Qua 6 Out 2010 - 23:44

burlador,

O autor já deu o UP de hoje, você não precisava ter feito flood.
avatar

.Danni.
Membro do Fórum

Feminino
Inscrito dia : 13/01/2010
Mensagens : 1860
Pontos Ativos : 2592

Ver perfil do usuário http://castelobruxo.tk https://www.facebook.com/dannielagoes

Resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por Bristol em Sab 9 Out 2010 - 23:49

UP
avatar

Bristol
Nível 10

Masculino
Inscrito dia : 06/06/2010
Mensagens : 286
Pontos Ativos : 507

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

Resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por Nicker em Dom 10 Out 2010 - 0:56

Olá ,
Bristol o código utilizado foi esse :
<a href="/artigos/feed.rss" title="Feed RSS dos artigos" class="botao_rss">Feed Artigos</a>
Vermelho Seta Nesse local deve ser colocado o link para onde será redirecionado o botão.
Verde Seta O nome que estiver preenchido nesse local aparecer num pequeno quadro amarelho.
Azul Seta Coloque o nome do botão desejado.
Até Mais.
avatar

Nicker
Usuário destaque

Masculino
Inscrito dia : 04/05/2010
Mensagens : 549
Pontos Ativos : 780

Ver perfil do usuário http://www.publieiros.com/

Resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por JCMais em Dom 10 Out 2010 - 14:55

TopDestiny escreveu:Olá ,
Bristol o código utilizado foi esse :
<a href="/artigos/feed.rss" title="Feed RSS dos artigos" class="botao_rss">Feed Artigos</a>
Vermelho Seta Nesse local deve ser colocado o link para onde será redirecionado o botão.
Verde Seta O nome que estiver preenchido nesse local aparecer num pequeno quadro amarelho.
Azul Seta Coloque o nome do botão desejado.
Até Mais.

Isso concerteza ele já sabe, ele deseja na verdade é aquele efeito usado na title, também chamado de tooltip, eu já postei um, mas ele deseja um que apareça com um fade. Feliz
avatar

JCMais
Nível 9

Masculino
Inscrito dia : 02/07/2010
Mensagens : 202
Pontos Ativos : 243

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

Resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por Bristol em Dom 10 Out 2010 - 18:14

JCMais, é verdade e agora percebo que não sou só eu que deseja saber
avatar

Bristol
Nível 10

Masculino
Inscrito dia : 06/06/2010
Mensagens : 286
Pontos Ativos : 507

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

Resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por Nicker em Dom 10 Out 2010 - 21:17

Olá ,
Ainda sim tou tentando achar esse código, achei um muito parecido com o efeito desejado :
Código:
<style type="text/css">
<!--
  .formata { /* esta classe é somente
              para formatar a fonte */
  font: 12px arial, verdana, helvetica, sans-serif;
  }
  a.dcontexto{
  position:relative;
  font:12px arial, verdana, helvetica, sans-serif;
  padding:0;
  color:#039;
  text-decoration:none;
  border-bottom:2px dotted #039;
  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:3em;
  text-align:justify;
  left:0;
  font: 12px arial, verdana, helvetica, sans-serif;
  padding:5px 10px;
  border:1px solid #999;
  background:#e0ffff;
  color:#000;
  }
  -->
</style>

</head>
<body>
<p class="formata">
<a href="#" class="dcontexto">FDF
<span><strong>Forum dos forum</strong>
</span></a>
</body>
Até Mais.
avatar

Nicker
Usuário destaque

Masculino
Inscrito dia : 04/05/2010
Mensagens : 549
Pontos Ativos : 780

Ver perfil do usuário http://www.publieiros.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