Efeito tooltip de maneiras variadas

Bem galera creio eu que esse é o último tuto que vou postar por hoje bem let's go então xD.(se der eu posto mais SE DER)

Demonstração

procure por ]]></b:skin>   adicone o código abaixo, acima dela;

 /* Efeito tooltip simples com jQuery e css3
----------------------------------------------- */
.tip {
    color: #fff;
    background:#1d1d1d;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

Agora o Jquery procure por </head> e adicione o código abaixo acima dela.

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'/>
<script src='http://vinneh.webs.com/Image.js' type='text/javascript'/>

Agora o html adicione onde preferir sendo na postagem ou no próprio gadget Html/JavaScript apenas substitua onde é pedido

 Imagem com tooltip imagem

 <a href="LINK PARA ONDE SERÁ DIRECIONADO" target="_blank" class="tip_trigger" style="float: left; margin: 5px 20px 20px 0; padding: 10px; border: 1px dashed #ddd;">
        <img width="TAMANHO DA LARGURA REDIMENSIONADO DA IMAGEM" src="LINK DA IMAGEM" alt="TAGS DA IMAGEM"/>
        <span class="tip"><img src="LINK DA IMAGEM QUE APARECERÁ QUANDO PASSAR O MOUSE" height="TAMANHO DA ALTURA DA IMAGEM AO PASSAR O MOUSE" alt="TAGS DA IMAGEM" /></span> 
    </a>

Link com tooltip e texto a direita e imagem a esquerda/direita

<p><a class="tip_trigger" href="LINK PARA ONDE SERÁ DIRECIONADO">TITULO DO LINK<span class="tip" style="width: LARGURA DO TOOLTIP;"><img width="TAMANHO DA LARGURA QUE A IMAGEM SERÁ REDIMENSIONADA QUANDO PASSAR O MOUSE" src="LINK DA IMAGEM" style="float: left; margin-right: 20px;" alt="" />TEXTO DA NOTICIA/BIOGRAFIA ETC.....</span></a></p>

Para alterar o lado da imagem só mudar left para right que ficará a direita



Link com tooltip texto ao passar o mouse

<a href="#" class="tip_trigger">LINK PARA ONDE SERÁ DIRECIONADO <span style="width: LARGURA DA TOOLTIP;"class="tip">TEXTO</span></a>

Bom é isso galera espero que tenham curtido até a próxima ^^