Modelos de Tooltip ♥

Hey, estava pensando em tutoriais simples que ainda não foram feitos, aqui está.

Peguei os modelos nos blogs: ♥ ♥ ♥ ♥

Não sabe o que é um Tooltip? É aquela caixinha que aparece quando você seleciona algo como, o botão de editar, uma elite de afiliados... Não entendeu? Tirei um print do Tooltip do MHR.

Entendeu agora né? Haha :P

1. No HTML do blog, procure por </head> acima da tag cole:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/>

2. Escolha o modelo de Tooltip e cole o código dele acima de ]]></b:skin>

@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;
text-shadow: 1px 1px 0px #ccc6e8;
display: none;
color:#fff;
text-align: left;
position: absolute;
z-index: 1000;
text-transform: uppercase;
background: #dcd8ef;
border: solid 1px #ccc6e8;
font-family: silkscreen;
font-size: 8px;
no-repeat 5%;
}

 

@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;
text-shadow: 1px 1px 0px #f7cedd;
display: none;
color:#FFF;
text-align: left;
position: absolute;
z-index: 1000;
text-transform: uppercase;
background: #fce3ec;
border: solid 1px #f7cedd;
font-family: silkscreen;
font-size: 8px;
no-repeat 5%;
}

@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;
}

@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);
}

 

div#qTip {

padding: 3px;

border: 2px solid #A2CD5A;

display: none;

background: transparent url(http://media.tumblr.com/tumblr_mej6isPoDA1r16se4.png);

color: #696969; /* Cor do texto */

font-family: Century Gothic; /* Fonte */

font-size: 11px;

text-align: left; /* Alinhamento do texto */

position: absolute;

z-index: 1000;

}

div#qTip {
padding: 3px;
display: none;
border: 1px solid #1874CD;
background: url(http://24.media.tumblr.com/tumblr_m8li27B93N1r44mhto1_500.png);
color: #FFFFFF; /* Cor do texto */
font-family: Century Gothic; /* Fonte */
font-size: 11px;
text-align: left; /* Alinhamento do texto */
position: absolute;
z-index: 1000;
border-radius: 2px;
}

div#qTip { padding: 7px; border-left: 3px solid #000; border-right: 3px solid #000; display: none;background: #f5f5f5; color: #696969; font-family: arial; font-size: 9px;text-align: left; position: absolute;z-index: 1000; }

div#qTip { padding: 5px; border: 2px solid #CD6090; border-radius: 5px; display: none;background: #f5f5f5; color: #000; font-family: arial; font-size: 9px;text-align: left; outline-style:dashed; outline-width:1PX; outline-color: #FF82AB; outline-offset: -5PX; position: absolute;z-index: 1000; }

Se usar, credite.

Beijos, Ráh