Modelos de tooltip
Autor: Ingrid Santos | Publicado: 2013-10-30T19:32:00-07:00






Boa Noite morangos, como está vocês? eu vou não tão bem mais to bem rs. Agora pouco estava mexendo no HAD que é meu outro blog ai entrei num blog que é parceiro do meu, ai entrei em outro blog e fui vendo vários blogs, bom enfim acabei caindo no Vanessa Tutoriais, eu amei o blog e lá tinha um tutorial do qual eu estava atrais a muito tempo e então achei lá. O tutorial foi feito pelo Kawaii World que fechou eu achei uma pena pois adorava o blog visitava direto, mais fazer o que se a dona preferiu fechar :/, bom então vamos ao tutorial os créditos estão no final da postagem, então vamos ao tutorial.







Vá no seu modelo e aperte Ctrl + F ou F3 e procure por &lt;head&gt; e cole o seguinte código a seguir:



&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'&gt;&lt;/script&gt;&lt;script language='JavaScript' src='http://static.tumblr.com/0xqvkot/uNAmn5zem/there.js' type='text/JavaScript'&gt;&lt;/script&gt;&nbsp;
Depois é só escolher o modelo que você quer e aplicar antes de&nbsp;]]&gt;&lt;/b:skin&gt;:


&nbsp;&nbsp;



@font-face
{ font-family: "silkscreen"; src:
url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }div#qTip
{margin:2px;padding:
5px 9px;border-right-width:
1px;border-bottom-width:
1px;display:
none;color:#fff;background:
#9bb3bc;box-shadow:
inset 0 0 20px #5ea0b9, 0 0 10px #ccc;font-family:
silkscreen;font-size:
8px;no-repeat
5%;text-align:
left;position:
absolute;z-index:
1000;opacity:
1.0;text-transform:
uppercase;-webkit-transition:
all 0.1s linear;-moz-transition:
all 0.1s linear;-o-transition:
all 0.1s linear;}


&nbsp;&nbsp;



@font-face { font-family:
"silkscreen"; src:
url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }div#qTip {margin:2px;padding: 5px 9px;border-right-width:
1px;border-bottom-width:
1px;display: none;color:#989898;background: #e9e9e9;border: solid 1px
#c4c2c3;font-family:
silkscreen;font-size: 8px;no-repeat 5%;text-align: left;position: absolute;z-index: 1000;opacity: 1.0;text-transform:
uppercase;-webkit-transition:
all 0.1s linear;-moz-transition:
all 0.1s linear;-o-transition: all
0.1s linear;}


&nbsp;&nbsp;


@font-face
{ font-family: "silkscreen"; src:
url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }div#qTip {margin:2px;padding: 5px 9px;border-right-width:
1px;border-bottom-width:
1px;display: none;color:#fff;background: #fd97b1;border: solid 1px
#eb7896;font-family:
silkscreen;font-size: 8px;no-repeat 5%;text-align: left;position: absolute;z-index: 1000;opacity: 1.0;text-transform:
uppercase;-webkit-transition:
all 0.1s linear;-moz-transition:
all 0.1s linear;-o-transition: all
0.1s linear;-moz-box-shadow:inset 0px 0px 1px
rgba(255,255,255,1.0);-webkit-box-shadow:inset 0px 0px 1px
rgba(255,255,255,1.0);box-shadow:inset 0px 0px 1px
rgba(255,255,255,1.0);}


&nbsp;


@font-face { font-family:
"silkscreen"; src:
url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }div#qTip {margin:2px;padding: 5px 9px;border-right-width:
1px;border-bottom-width:
1px;display: none;color:#fff;background:
-moz-linear-gradient(top,#c7abc7 0%,#d49dbe);background:
-webkit-gradient(linear, left top,
left bottom,from(#c7abc7),to(#d49dbe));-moz-border-radius:
2px;-webkit-border-radius:
2px;border-radius: 2px;border: 1px solid
#a680a8;font-family:
silkscreen;font-size: 8px;no-repeat 5%;text-align: left;position: absolute;z-index: 1000;opacity: 1.0;text-transform:
uppercase;-webkit-transition:
all 0.1s linear;-moz-transition:
all 0.1s linear;-o-transition: all
0.1s linear;-moz-box-shadow:inset 0px 0px 1px
rgba(255,255,255,1.0);-webkit-box-shadow:inset 0px 0px 1px
rgba(255,255,255,1.0);box-shadow:inset 0px 0px 1px
rgba(255,255,255,1.0);}&nbsp;

Então o que acharam do tutorial? Bem legal neh, eu gostei do azul, usem e comentem o que acharam.

Bjokasss

Creditos - Kawaii World e Vanessa Tutorial