[Resolvido] Como fazer efeito tooltip? Hitskin_logo Hitskin.com

Isto 茅 uma pr茅-visualiza莽茫o de um tema em Hitskin.com
Instalar o temaVoltar para a ficha do tema

[Resolvido] Como fazer efeito tooltip?

+3
Steeph
..Bruno..
Bristol
7 participantes

Ir para baixo

T贸pico resolvido [Resolvido] Como fazer efeito tooltip?

Mensagem por Bristol 24.09.10 20:59

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

Membro desde : 06/06/2010
Mensagens : 286
Pontos : 507

http://chegadetedio.forumeiros.com

Ir para o topo Ir para baixo

T贸pico resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por Convidad 24.09.10 23:16

Ol谩 boa noite,

A que efeito se refere? Mostre com uma imagem.
Anonymous
Convidad
Convidado


Ir para o topo Ir para baixo

T贸pico resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por ..Bruno.. 24.09.10 23: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.
..Bruno..
..Bruno..
**

Membro desde : 24/09/2010
Mensagens : 86
Pontos : 101

http://testeforumeiros2.forumeiros.com

Ir para o topo Ir para baixo

T贸pico resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por Bristol 25.09.10 19: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:
[Resolvido] Como fazer efeito tooltip? Titlewj
Bristol
Bristol
****

Membro desde : 06/06/2010
Mensagens : 286
Pontos : 507

http://chegadetedio.forumeiros.com

Ir para o topo Ir para baixo

T贸pico resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por Steeph 25.09.10 19: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!
Steeph
Steeph
Hiper Membro

Membro desde : 08/03/2010
Mensagens : 2612
Pontos : 3503

http://www.kromusdesign.forumeiros.com http://www.twitter.com/ideasfromsteeph

Ir para o topo Ir para baixo

T贸pico resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por JCMais 25.09.10 20: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://mob474.photobucket.com/albums/rr102/Ronj4/FixSkin/i_info.png?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
JCMais
JCMais
****

Membro desde : 02/07/2010
Mensagens : 202
Pontos : 243

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

T贸pico resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por Bristol 29.09.10 2:47

Descobriram mais algo?
Bristol
Bristol
****

Membro desde : 06/06/2010
Mensagens : 286
Pontos : 507

http://chegadetedio.forumeiros.com

Ir para o topo Ir para baixo

T贸pico resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por JCMais 29.09.10 3: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.
JCMais
JCMais
****

Membro desde : 02/07/2010
Mensagens : 202
Pontos : 243

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

T贸pico resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por burlador 03.10.10 12: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>

avatar
burlador
****

Membro desde : 25/01/2010
Mensagens : 200
Pontos : 290

http://google.com

Ir para o topo Ir para baixo

T贸pico resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por JCMais 03.10.10 16:45

Amigo espere pelo menos 24 horas antes de dar Up em seu t贸pico.
JCMais
JCMais
****

Membro desde : 02/07/2010
Mensagens : 202
Pontos : 243

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

T贸pico resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por .Danni. 06.10.10 22:44

burlador,

O autor j谩 deu o UP de hoje, voc锚 n茫o precisava ter feito flood.
.Danni.
.Danni.
Super Membro

Membro desde : 13/01/2010
Mensagens : 1880
Pontos : 2623

https://coletivomistico.forumbrasil.net/

Ir para o topo Ir para baixo

T贸pico resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por Bristol 09.10.10 22:49

UP
Bristol
Bristol
****

Membro desde : 06/06/2010
Mensagens : 286
Pontos : 507

http://chegadetedio.forumeiros.com

Ir para o topo Ir para baixo

T贸pico resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por Nicker 09.10.10 23: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.
Nicker
Nicker
Membro

Membro desde : 04/05/2010
Mensagens : 549
Pontos : 780

http://www.publieiros.com/

Ir para o topo Ir para baixo

T贸pico resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por JCMais 10.10.10 13: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
JCMais
JCMais
****

Membro desde : 02/07/2010
Mensagens : 202
Pontos : 243

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

T贸pico resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por Bristol 10.10.10 17:14

JCMais, 茅 verdade e agora percebo que n茫o sou s贸 eu que deseja saber
Bristol
Bristol
****

Membro desde : 06/06/2010
Mensagens : 286
Pontos : 507

http://chegadetedio.forumeiros.com

Ir para o topo Ir para baixo

T贸pico resolvido Re: [Resolvido] Como fazer efeito tooltip?

Mensagem por Nicker 10.10.10 20: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.
Nicker
Nicker
Membro

Membro desde : 04/05/2010
Mensagens : 549
Pontos : 780

http://www.publieiros.com/

Ir para o topo Ir para baixo

Ir para o topo

- T贸picos semelhantes

 
Permiss玫es neste sub-f贸rum
N茫o podes responder a t贸picos