10 Modelos para tooltip

14:58 1 Comments A+ a-


Trouxe alguns modelos bem fofos para tooltip hoje gente, para quem não sabe tooltip é aquele balãozinho que aparece quando passamos o mouse por cima de algum link, tipo assim:

                                            

O tooltip padrão do blogger na minha opinião é horrível e caso você também ache isso e quiser mudar venha comigo, trouxe vários modelos.



Modelo 1:
                     



@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;
}
Modelo 2:

                  

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

Modelo 3:

               


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

Modelo 4:
                 

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

Para os tooltip's a seguir é preciso acrescentar esse código acima de <head>, se não; não funciona:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script language='JavaScript' src='http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js' type='text/JavaScript'></script>

Para esse tooltip:
                            cole esse código:
@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}
div#qTip {
margin:10px;
padding: 6px;
display: none;
no-repeat 5%;
z-index: 1000;
position: absolute;
background: #ffdce3;
box-shadow: inset 1px 1px 0 #ffc2ce;
text-shadow: 1px 1px 0 #ffedf0;
color: #ffa0b3;
font-size: 8px;
font-family: "handy";
-webkit-border-radius: 8px;
-webkit-border-top-left-radius: 0;
-moz-border-radius: 8px;
-moz-border-radius-topleft: 0;
border-radius: 8px;
border-top-left-radius: 0;
}

Para esse:
                 cole:


@font-face {
font-family: "wendy";
src: url("http://static.tumblr.com/mw3v5cd/jxRmaip37/wendy.ttf"); /* para IE */
src: local("wendy"), url("http://static.tumblr.com/mw3v5cd/jxRmaip37/wendy.ttf") format("opentype");
}
div#qTip {
margin:10px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 6px;
padding-right: 5px;
display: none;
no-repeat 5%;
z-index: 1000;
position: absolute;
background: #e8e1e7;
box-shadow: inset 0px 0px 5px #ddd2dc;
text-shadow: 1px 1px 0 #f3eff3;
border: 1px solid #d2c3d1;
outline: solid 1px #e8e1e7; outline-offset: -2px;
letter-spacing: 2px;
color: #c7b5c5;
font-size: 11px;
font-family: "wendy";
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
} 

Para esse:
               
@font-face {font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf');}
div#qTip {
margin:10px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 6px;
padding-right: 5px;
display: none;
no-repeat 5%;
z-index: 1000;
position: absolute;
background: #d8e7e4;
box-shadow: inset 2px 2px 0px #c6e0db;
text-shadow: 1px 1px 0 #e6efed;
border: 1px solid #b4d3cd;
color: #b3cfc9;
letter-spacing: 1px;
font-size: 8px;
font-family: "silkscreen";
-webkit-border-top-right-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-topright: 9px;
-moz-border-radius-bottomright: 9px;
border-top-right-radius: 9px;
border-bottom-right-radius: 9px;
}

Para esse:
                   
@font-face {font-family: "04b03";
src: url('http://static.tumblr.com/icz5xqv/ZUmlobzpk/bonjourlindas.blgspt_upload_pxl.ttf'); format("truetype"); }div#qTip {
margin:10px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 6px;
padding-right: 5px;
display: none;
no-repeat 5%;
z-index: 1000;
position: absolute;
background: #ebebeb;
box-shadow: inset 1px 1px 0px #f6f6f6;
text-shadow: 1px 1px 0 #fff;
border: 3px double #dadada;
color: #cfcfcf;
letter-spacing: 1px;
font-size: 8px;
font-family: "04b03";
text-transform: uppercase;
}
Apenas esses quatro tooltip's que necessitam do código acima de head, os quatro primeiros e os que vem a seguir não.

Modelo 9:
                





@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%;
}
Modelo 10: 

                   

@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%;
}
Acabou gente <3 esses tooltip's são muito fofos <3 eu realmente gostei de cada um, tenho certeza que no blog de vocês vão ficar lindos :3 Bom uso! E antes que eu me esqueça, créditos ao Kawai World aos 4 primeiros modelos!
Beijos! 

Sou Nathalia Nates, adolescente, confusa, que não sabe o que quer da vida, e por isso tenta de tudo(desistindo na maioria das vezes por ter medos e inseguranças).

Nasci em uma pequena cidade do norte do paraná, onde moro até hoje, com meus pais e meus dois cachorros.