04/01/2015

Modelos para Tooltip

Gotósooo
Hellow!! Encontrei mais tooltip personalizados!! Créditos vão para Part Of Me
Vem ver!!

Blogger, clique no nome do seu Blog - Modelo - Editar HTML - Pesquise por: </head>
Antes dessa tag, cole o código abaixo:
<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'/>

Colou? Agora é a hora da "Personalização".
Tooltip 1
Esse é o primeiro Tooltip, para aplicá-lo no seu Blog siga os passos:
Ainda no Painel de CSS do Blog, pesquise por: ]]></b:skin> Acima dessa tag, cole o código que segue:

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


Tooltip 2



div#qTip {
padding: 3px;
border: 1px double #f5f5f5;
display: none;
background: #FA8072;
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: 10px 10px 0px 10px;
box-shadow: inset 0 0 8px #f5f5f5;
}


Tooltip 3
div#qTip {padding: 3px;display: none;background: transparent url(http://3.bp.blogspot.com/-9YG-Upz4H1o/TamvsqCOWKI/AAAAAAAAARo/q-QwUv5Pftw/s320/2r7pqqa.jpg);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: 10px;}


Tooltip 4
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;
}


Tooltip 5
div#qTip {
margin:2px;
padding: 5px 5px 5px 25px;
display: none;
color:#78a7c8;
background: #fdfdfd;
border: 1px solid #F5F5F5;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font: Century Gothic;
font-size: 10px;
background:#fff url(http://media.tumblr.com/tumblr_lx9va28WQZ1qmyqtl.png)
no-repeat;
text-align: left;
position: absolute;
z-index: 1000;
}
Beijos >3<

Nenhum comentário:

Postar um comentário