Siga-nos por Email:

sexta-feira, 24 de junho de 2011

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.

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ê

3 comentários:

  1. Sílvia, tenho medo de mexer, viu?
    Acho esse recurso muito legal, já vi em vários textos.
    Vou tentar, no meu blog de testes, e ver se aprendi. Sempre é bom a gente enfrentar os medos, não? rsrs
    Beijo!

    ResponderExcluir
  2. Silvia,

    Obrigada pela dica, tenho medo de mexer... Mas gostaria de saber como crio um blog de testes... preguiça de procurar!!! Tento depois no teste.

    Beijos

    ResponderExcluir
  3. Ói Silvia,

    Lindo esse efeito, ainda bem que já tenho né?
    você fez pra mim rs.

    beijo querida

    ResponderExcluir

Para receber as postagens por e-mail:

Digite seu email aqui:

Delivered by FeedBurner