[Resolvido] Como fazer efeito tooltip?

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

Olá boa noite,

A que efeito se refere? Mostre com uma imagem.

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.

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:

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!

Eu sei como faz
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.

Descobriram mais algo?

Bristol escreveu:Descobriram mais algo?

Veja meu fórum, no widget de "Últimos assuntos" posicione o mouse sobre os links.
Consegui colocar o efeito para funcionar.

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>

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

burlador,

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

UP

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 Nesse local deve ser colocado o link para onde será redirecionado o botão.
Verde O nome que estiver preenchido nesse local aparecer num pequeno quadro amarelho.
Azul Coloque o nome do botão desejado.
Até Mais.

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 Nesse local deve ser colocado o link para onde será redirecionado o botão.
Verde O nome que estiver preenchido nesse local aparecer num pequeno quadro amarelho.
Azul 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.

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

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.