Image Map

9.1.12

Tutorial - Tooltip Personalizado

| |
Tumblr_l7fvyfawb01qb5nu3o1_500_large

       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

Um comentário:

  1. Já sabia fazer pelo tumblr, rs.
    Adorei o blog e obrigada por estar sempre visitando meu bloguinho. Aceito sim parceria :)
    Xoxo,
    Cupcake Estiloso

    ResponderExcluir

Comente o quanto quiser, mas...
♥ Nada de palavrão!
♥ Para os "Estou te seguindo, segue?", só digo uma coisa: seguirei pelo conteúdo, ok, amr?
♥ Deixe o link do seu blog, vou amar visitar!
♥ Tento retribuir todos os comentários!