Efeito Tooltip com Transition

E ai galerinha, depois de tirar as teia de aranha do meu painel de postagens do blogger, venho trazer o Efeito Tooltip com Transition, é um efeito que peguei e editei... falando um pouco sobre esse efeito é o seguinte: ao passar o mause sobre o link ele mostra o titulo do link (pode ser link ou imagem) de uma forma personalizada ... confiram a Demo abaixo:

Demonstração

1º - Vá em >> Editar HTML >> e procure pela seguinte tag:

</head>
Acima dela adicione o seguinte Script:

<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/3173073/GothicDarkness/qTip.js' type='text/JavaScript'/>

2º - Vá em >> Editar HTML >> e procure pela seguinte tag:

]]></b:skin>
E logo acima dela adicione o seguinte CSS:

div#qTip {
padding: 3px;
display: none;
background: #272727;
color: #fff;
border-radius: 5px;
font-family: "Arial";
font-size: 13px;
text-align: left;
position: absolute;
z-index: 1000;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
Agora quando você for colocar algum link, basta colocar assim:

<a href='ENDEREÇO-DO-LINK' title='Descrição do link ao passar o mouse'>NOME-DO-LINK</a>
Ou se for colocar uma imagem ficará assim:

<a href='ENDEREÇO-DO-LINK' title='Descrição do link ao passar o mouse'><img width="LARGURA DA IMAGE" height="ALTURA DA IMAGEM" src="URL DA IMAGEM" /></a>
Pronto galera é só isso, muito fácil e rápido ... espero que tenham gostado e até o próximo tuto xD!