♦ Tutorial ~ Personalizando o Tooltip

Olá Rilakkumas!!

 Novamente trouxe um tutorial, quem pediu foi a Lovelly do ♦ Lovelly no Sekai ♦ e o pedido foi um tutorial de como personalizar a Tooltip.

 Tooltip é aquele balãozinho que aparece quando passamos o cursor sobre links, igual quando você passa o cursor em cima das minhas elite de afiliados.

 Viu??? É bonito néh??? Então vamos aprender.

 Mas antes de qualquer coisa, esse tutorial é original do Bad Reputation, então créditos para lá.

 Continue lendo >>>

 Vá em:

MODELO  EDITAR HTML e aperte Ctrl + F e procure por /body

E cole em cima dele 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'/>

<style>div#qTip{

margin:17px 0;

padding:3px 5px 3px 22px; /*modifique se precisar ajustar o mini gif*/

display:none;

background:#fff  /*Cor de fundo do Tooltip*/ url(url do mini gif)no-repeat 5%;

text-align:left;

font-family:  'arial'; /*modifique a fonte se quiser*/

font-size:12px; /*tamanho da fonte*/

z-index:1000;

position:absolute;

color:#000; /*Cor da letra que quiser*/

border:#ccc solid 1px; /*Cor e estilo da borda que quiser*/

border-radius:10px /*Se quiser arredondar o balãozinho*/

}

</style>

 Pronto, personalize ao seu jeito, o código já explica o que tem que fazer.

 Sobre a mini-gif, você vai encontrar vários AQUI e AQUI
 E aqui tem uma tabela de cores MX Studio
 Onde está tem o

border:#ccc solid 1px; /*Cor e estilo da borda que quiser*/

 #ccc é a cor da borda
 Solid é o tipo da borda, troque o nome por um desses do exemplo

  E px é grossura da borda

 Lembrando, para pegar a URL da imagem selecione ela, aperte o botão direito do mouse e selecione "Copiar URL da imagem".

Novamente os créditos ao Bad Reputation