Tutorial: Personalizando Tooltip

Oi amores, tudo bem? Eu estou ótima. Desculpem-me por não ter postado ontem, pelo que vejo a Babii foi rápida em? rsrs. Bom, quero dizer a vocês que vou postar bem pouco nesta semana, na outra também, pois estarei fazendo as provas e tenho que estudar muito para passar nesta unidade. Também quero falar que vou fazer uma elite afiliados aqui no blog, e caso alguém queira se afiliar, comente neste post avisando ok?

Bem, trouxe um tutorial de nível fácil para vocês, é super legal. É um tooltip bem fofo, com opacidade no fundo, podem ver um exemplo aqui no blog.

PS: Passe o mouse no nome do autor do post para ver :3

Então, vamos começar. Primeiramente procure por </head> e cole acima dele este código:

<script src='http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js' type='text/javascript'/><script language='JavaScript' src='http://dl.dropbox.com/u/35546279/qTip_pinkskulldesign.com_.js' type='text/JavaScript'/>  

Após ter feito isto, procure por ]]></b:skin> e cole acima dele o seguinte:

div#qTip {

margin:3px;

padding: 6px 10px;

border-right-width: 2px;

border-bottom-width: 2px;

display: none;

border-radius: 3px; /* Borda arredondada, retire se não quiser */

color:#fbfbfb; /* Cor da fonte do tooltip */

background: #000; /* Cor de fundo do tooltip, mude para a cor que deseja */

font-family: handy;

font-size: 8px;

no-repeat 5%;

text-align: left;

position: absolute;

z-index: 1000;

opacity: 0.8; /* Aqui é a opacidade da caixa, retire se quiser a cor normal */

text-transform: uppercase;

}

@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}

Pronto, o código está bem explicadinho no que você deve alterar ok? Depois disto visualize e salve.

Espero que tenham gostado, um beijão amoures :3