Tooltip nos titles do blog [001]

-drwmania.tumblr.com-

Yooo, meus amados e amadas.  Trago um tutu beeeem legal que achei em um dos modelos do site -www.soratemplates.com- visitem lá, vocês vão amar. Mas bom vamos ao que interessa! Para quem não sabe o efeito tooltip e para dar uma arrumadinha quando usamos a função title exemplo? Quando passamos o mouse por cima de alguma imagem ou texto e aparece alguma frase ou nome.

Para adicionar esse efeito procure pelo bendito ]]></b:skin>, coitado já deve ta gritando de tanto código que fica em cima dele...e ai acho?

Agora acima dele cole esse código:

Códigos

div#qTip {
padding: 5px;
border: 1px dotted #4059e9; ---/*estilo da borda */
border-right-width: 1px;
border-bottom-width: 1px;
display: none;
background: #ebf1ff; ---/* cor do fundo */
color: #ffffff; ---/* cor do texto */
font: Verdana;
font-size: 9px; /* tamanho da fonte */
text-align: left;
position: absolute;
z-index: 1000;
-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

Se não quiser as bordas apenas remova essa parte:

   -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

Lembrando! Que ele só funciona se você usar a função title.

Em texto:

Códigos

 <a href='Url do Link' title='Título do Link'>Nome do Link</a>

Em imagem

Códigos

 <a href="Link para a Imagem" title="Título do Link"><img src="Url da Imagem" class="efeito"></a> 

E ai gostou? Bom não esqueça de visitar o Sora e deixar um recadinho viu? Beijo e ate a próxima!