Tutorial - Modelos de Tooltip




Oiiii genteney tudo em cima kkkkk hoje vim trazer bonitos e delicados tootips pra vocês :3 Vamos la?
1. Primeiro, vá até editar HTML. Clique em qualquer lugar da caixa e depois pressione "Ctrl + F". Procure por:  
<head>
 e acima disso, cole: 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script language='JavaScript' src='http://static.tumblr.com/0xqvkot/uNAmn5zem/there.js' type='text/JavaScript'></script>
 2. Basta escolher um dos modelinhos e colar o código acima de: 
 ]]></b:skin>
 1. Modelo

 @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: #5ea0b9;
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;
}
2. modelo 
@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:#c7abc7;
background: #e9e9e9;
border: solid 1px #c7abc7;
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;
}
3. modelo 
@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 #fbfbfb;
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;
}
4. modelo
@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:#9bb3bc;
background: #fbfbfb;
border: solid 1px #9bb3bc;
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;
}
Fim! Espero que tenha gostado bjs ^^

Nenhum comentário :

Postar um comentário