Efeito Tooltip no link

Para quem não sabe efeito tooltip é essa caixinha com descrição que aparece toda vez que você passa o mouse por cima de um link.  é utilizado um script leve e funcional, esse efeito deixa um visual muito bonito, vamos a ele.

Passe o mouse

Esse efeito só funciona em links que tenham descrição  de título.  O que seria isso? Veja esse exemplo

<a href='ENDEREÇO-DO-LINK' title='DESCRIÇÃO-DO-TITULO'>NOME-DO-LINK</a>

Esse script  funciona com a biblioteca do JQuery na versão 1.3.2, se já tiver essa biblioteca instalada em seu blog, não será necessário  repetir a chamada dela.

1º Passo = Instalar o Javascript:





Copie o código abaixo e cole antes/acima de </head> -

<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º Passo = Aplicar estilo CSS





Procure a tag ]]></b:skin> e cole o código seguinte acima dela:

div#qTip {
padding: 3px;
border: 1px solid #666;   ---/* edite cor da borda */
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
background: #999;  ---/* edite cor de fundo */
color: #FFF;  ---/* edite cor do texto */
font: bold 9px Verdana, Arial, sans-serif;
text-align: left;
position: absolute;
z-index: 1000;
}

A funcionalidade desse script pode variar de acordo com o template.





fonte: Mundo blogger











Gostou desse efeito, mas, tem medo de mexer no template?



Eu faço para você