Tutorial - Tooltip Personalizado

       Oie, gente! Como eu tinha prometido, aqui está o tutorial de como personalizar o Tooltip. Abaixo, você vai encontrar (e entender!) o que é isso e como fazer. What Are U Waiting for?

1º passo - Aprendendo com a tia Aline

   

       Antes de tudo, você sabe o que é Tooltip? Se não, preste bem atenção, ok? Tooltip é aquela mensagem explicativa que aparece quando colocamos o mouse em cima de um link ou imagem. Quer ver só? Passe o mouse bem aqui e dê uma olhada nas imagens abaixo.

 

2º passo - Personalizando em 3 passos

1: Design > Editar HTML. Faça CTRL + F e procure por  </head>. Acima disso, cole esse código:

<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'/>

2: Agora procure por ]]</b:skin>. Acima disso, cole o código abaixo:

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

3: Personalize! Modifique a cor do texto, do fundo e da borda, o estilo da borda, o tamanho da fonte etc. Eu, por exemplo, uma vez, deixei sem fundo/fundo transparente. Para fazer isso, apague o que está em azul.

Ps.: NÃO ESQUEÇA DE SALVAR ;)

3º passo - Usando e abusando

     Para usar, é só usar esse código (para links):

<a href='LINK_AQUI' title='DESCRIÇÃO_DO_TITULO'>NOME_DO_LINK</a>

     Ou esse (para imagens):

<img src='LINK_DA_IMAGEM' title='TÍTULO_DA_IMAGEM'/>

Gostou? Conseguiu? Sim? Não? Comenta! 

Tutorial adaptado de  Extras Place Fame