14/03/2013

GOODIES-modelos para tooltip

 Boa tarde!
Vim postar como editar a tooltip do blog,pra quem não sabe,é aquele trocinho que aparece quando você passa o mouse em cima do gadget quem somos,que mostra o nome,por exemplo,passando o mouse em cima da primeira imagem do quem somos vai aparecer Gabriel,é essa caixinha que aparece o nome que se chama tooltip,e nesse post eu vou ensinar a editar.
ANSIOSOS? Já sabem onde clicar....

*só pra constar,achei esse tuto no blog CHOCOLATE COM MORANGO*



1° Blue skylander

Cole acima de /body:
<script src='http://gizaa.googlecode.com/files/qTip.js' type='text/javascript'/>
<style>div#qTip{font:normal 8px &#39;pf ronda seven&#39;;margin:6px 0;padding:3px 19px;display:none;background:#fff url(http://media.tumblr.com/tumblr_lohot5dqXx1qda978.gif)no-repeat 1%;text-align:left;position:absolute;z-index:1000;color:#7ea5b6;box-shadow:0 1px 3px #ccc;border-radius:0px;text-transform: uppercase;}
</style>
Tradução

Em background: #fff é o fundo
O url em itálico é o url do mini-gif
color:#7ea5b6 é a cor da fonte
box-shadow:0 1px 3px #ccc é a sombra da caixinha
border-radius:0 é sem arredondamento,se você quiser arredondar aumente o número

2° Lilac Dreamer:
(o mini-gif fica mudando)

Cole acima de /body:
<script src='http://gizaa.googlecode.com/files/qTip.js' type='text/javascript'/>
<style>div#qTip{font:normal 8px &#39;pf ronda seven&#39;;margin:6px 0;padding:3px 19px;display:none;background:#BAB0C3 url(http://i12.photobucket.com/albums/a213/superkate_2468/favicon-3ico-1.gif)no-repeat 1%;text-align:left;position:absolute;z-index:1000;color:#8D669B;box-shadow:0 1px 3px#ccc;border-radius:0px;text-transform: uppercase;}
</style>

3°Red apple:

Cole acima de /body

<script src='http://gizaa.googlecode.com/files/qTip.js' type='text/javascript'/>
<style>div#qTip{font:normal 8px &#39;pf ronda seven&#39;;margin:6px 0;padding:3px 19px;display:none;background: #802828 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7cz5C5tznIlpATW8UDuOtt_cUg49aXERwMXxknE5xSeNqFURchMpky_sGlV1aqpUVDGQZW06L9RfWF-Ls4xf1Rdy98qbmpaNzmnId423C2cduLvK0z50ggW1tkfQdvocZ8NNdmLSK1IP/s1600/favicon.ico)no-repeat 1%;text-align:left;position:absolute;z-index:1000;color:#FF6B6B;box-shadow:0 1px 3px #5B2929;border-radius:0px;text-transform: uppercase;}
</style>

Espero que gostem!Beijocas!



#vou por um desses aqui no blog#

6 comentários: