Personalizando o tooltip

Olá anjos!

Uma coisa que sempre esqueço de colocar no meu blog é o tooltip. Aquele balãozinho que aparece quando a gente passa o mouse em cima de uma coisa é uma das personalizações mais legais que se pode ter em um blog. Eu pessoalmente fico passando o mouse em cima de tudo pra ver se o blog tem Tooltip. 

Hoje vou ensinar a personalizar esse tooltip. Muitos blogs tem esse tutorial, mesmo assim vou ensinar de novo.

Se você não sabe o que é o tooltip, clique aqui e passe o mouse em cima das imagens.

1-Vá no HTML do seu blog e procure por </head>. Acima cole:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script language='JavaScript' src='http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js' type='text/JavaScript'/>

2-Procure por ]]></b:skin>. Acima cole:

div#qTip {
padding: 4px;
border: 1px dotted #0abce0; ---/* cor, expressura, e estilo da borda */
border-right-width: 1px;
border-bottom-width: 1px;
display: none;
background: #e9eeef; ---/* cor do fundo */
color: #14c4e8; ---/* cor do texto */
font: Verdana;
font-size: 10px; /* tamanho da fonte */
text-align: left;
position: absolute;
z-index: 1000;
-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

Caso queira com gif, personalize esse código:

div#qTip {
margin:2px;
padding: 7px 20px;  /* espaçamento */
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
color:#78a7c8;  /* cor da fonte */
background: #fdfdfd;  /* cor de fundo */
-moz-border-radius: 3px;  /* bordas arredondadas */
-webkit-border-radius: 3px; /* bordas arredondadas */
border-radius: 3px;  /* bordas arredondadas */
font: Verdana;  /* estilo da fonte */
font-size: 10px;  /* tamanho da fonte */
background:#fff url(http://i387.photobucket.com/albums/oo314/paravidatoda/mini-200.gif) /*url do mini gif*/
no-repeat 5%;
text-align: left;  /* alinhamento da imagem */
position: absolute;
z-index: 1000;
box-shadow: inset 0 0 4px #eee, 0 0 4px #ccc;  /* sombra */
}

 Troque a parte em negrito pelo seu mini gif.

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar