12/09/2012

Tutorial: Efeito tooltip nos titles

||
-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 entereça! 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:

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:

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

Em imagem

 <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!

Nenhum comentário:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram