Tooltip + Novo Layout!

Olá meus docinhos >.< (até eu nessa mania?) Gostaram do layout novo? Ele se chama "Falso Tumblr", e eu acho que ele ficou 50 bilhões de vezes melhor do que o outro -exagero- quer dizer, eu curti, e vocês? Ah, o tutorial! 

Então, o tutorial de hoje é Tooltip. Mas, o que é Tooltip? Tooltip é um tipo de mensagem colorida que aparece ao passar o mouse, como por exemplo aqui. Chega de enrolação e vamos ao código!


Bom, primeiro instale o Javascript colando o código abaixo acima da tag </head> no HTML do seu blog.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://dl.dropbox.com/u/35546279/qTip_pinkskulldesign.com_.js' type='text/JavaScript'/>

Agora vamos aplicar o CSS. Vá em seu blog, Design, Designer do Modelo, Avançado e finalmente "Adicionar CSS". Na caixinha que aparecer, cole o CSS abaixo:

div#qTip {
padding: 3px;
border: 2px solid #666;
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
background: #999;
color: #FFF;
font: bold 9px Verdana, Arial, sans-serif;
text-align: left;
position: absolute;
z-index: 1000;
}

Faça como na imagem abaixo:

Bom, agora salve! Pronto, já tem tooltip no seu blog ! Para usar, basta colocar:

Nas imagens use:

<a title="Mensagem ao passar o mouse" href="link"><img src="url da imagem"/></a>

Nos links use:

<a href='link' title='Mensagem quando passa o mouse'>Nome do link</a> 

Bom, espero que tenham gostado do tutorial.. Beijos :* (P.S.: O modelo testado foi o modelo Viagem, não sei se funciona em outros modelos)