Tootilps - Personalizando

Olá!
Essa atualização do Google Chrome está mesmo uma bosta! Ele tá lerdo e às vezes dá um tilte estranho, e diz que o programa não está funcionado, e como meu computador já é lerdo, fazer a postagem demora muito. E o pior de tudo isso é que eu não tenho PhotoShop, acreditam? Eu faço todas as imagens em um PhotShop on-line. Se quiserem o link, é esse aqui.

Eu sei que o blog não foi criados para ser não mais um blog de HTML, mas não tem jeito. Eu mexo muito com isso, e mesmo não sabendo mexer direito, eu já apredi alguns codiguinhos com a ajuda desse blog divo. Aí eu só aprendo HTML, mas tem outros blogs que ensinam tutoriais. Hoje eu vou ensinar à vocês a criar seu próprio tooltip personalizado!  Para saber o que é tooltip, é só passar o moue no menu. Vamos lá?


Modelo Básico

Bem, o código seguinte é um código (que deve ser colocado acima de ]]><) de um modelo básico para poderem personalizar como quiserem, de acordo com o gosto de vocês. Sem personalizações, ele tem somente um fundo branco e cor da fonte preta.
div#qTip {
padding: 3px;
border: 1px solid #fff;
border-bottom-radius: 5px;
display: none;
background: #fff;
color: #000;
font-family: Pf Arma Five;
font-size: 8px;
position: absolute;
z-index: 1000;
}
Vamos entender o código?

border: 1px solid #fff;: Cor da borda em volta do tootlip.
background: #fff: Cor do fundo da tootip.
color: #000;: Cor da fonte.
font-family: Pf Arma Five: Nome da fonte.
font-size: 8px: Tamanho da fonte.
border-bottom-radius: 5px: Se não quiser as bordas arredondada, tire essa parte.

Modelo Personalizado |

div#qTip {
padding: 3px;
border-bottom-radius: 5px;
border: 1px solid #9d817e;
display: none;
background: #fff;
color: #9d817e;
font-family: Pf Arma Five;
font-size: 8px;
position: absolute;
z-index: 1000;
}
Modelo Personalizado ||


div#qTip {
padding: 3px;
border: 1px solid #a190a1;
display: none;
background: #cfbccf;
color: #736c6c;
font-family: Pf Arma Five;
font-size: 8px;
position: absolute;
z-index: 1000;
}
Como colocar

1. Procurem por </head> e coloque o código abaixo:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script language='JavaScript' src='http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js' type='text/JavaScript'></script>
2. Cole o código escolhido do tooltip ou do seu personalizado antes de ]]></b:skin>.

Espero que tenham gostado!

8 comentários:

  1. Oii, tudo bem? Amei seu blog e já estou seguindo. Aceita parceria? Vocês faz layouts free? Beijos,
    ~Jullie souzinha
    http://www.entreosvagalumes.blogspot.com/
    http://universodasleitoras.blogspot.com/

    ResponderExcluir
    Respostas
    1. Aceito só afiliação. E sobre os lays frees, ainda não fiz nenhum, mas posso fazer.

      Excluir
    2. Haha', viciada em 1d? Gostei :p
      Ah, eu gostaria sim que você fizesse um lay pra mim... Por onde a gente pode conversar sobre isso?

      Excluir
    3. Com certeza *u*
      Manda um e-mail para mim. Pode dizer como quer o lay, mas não vou poder fazer muita coisa sem meu Photoshop :(

      Excluir
  2. Gostei muito do 2.
    Pena que nunca funciona comigo ;-;
    ótimo tuto, muito bem explicado :D


    http://oppadoramas.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Comigo às vezes dá errado também.
      Que bom que gostou!

      Excluir