10 de out de 2012

Tutorial - Estilos de Tooltip


Hey Girls, hoje vou ensinar como colocar tooltip no blog, aprendi esse tutorial no Kawaii World, os créditos são todos a elas :) Estou muito feliz que voltaram!!


Primeiro você tem que colocar o tooltip assim:
1° - Cole acima de </head> 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://dl.dropbox.com/u/35546279/qTip_pinkskulldesign.com_.js' type='text/JavaScript'/>


2° - Agora, o estilo que você escolher deve ser copiado e colado acima de ]]</b:skin>


div#qTip {
margin:3px;
padding: 8px 22px;
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
color:#FF69B4;
background: #fdfdfd;
font-family: handy;
font-size: 8px;
background:#fff url(http://i11.photobucket.com/albums/a168/evelynregly/mini_gifs/mini_gifs80.gif)
no-repeat 5%;
text-align: left;
position: absolute;
z-index: 1000;
box-shadow: inset 0 0 4px #eee, 0 0 4px #ccc;
 text-transform: uppercase;
}
@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}



div#qTip {
margin:3px;
padding: 8px 22px;
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
color:#FF69B4;
background: #B0E0E6;
font-family: handy;
font-size: 8px;
background:#B0E0E6 url(http://2.bp.blogspot.com/-Pj-zOuvoRk8/UCJw4ObL7YI/AAAAAAAADCA/YaLkrSpWIB8/s1600/giftrechy3.png)
no-repeat 5%;
text-align: left;
position: absolute;
z-index: 1000;
box-shadow: inset 0 0 4px #eee, 0 0 4px #ccc;
 text-transform: uppercase;
}
@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}


div#qTip {
margin:3px;
padding: 8px 22px;
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
color:#000000;
background: #F5F5F5;
font-family: handy;
font-size: 8px;
background:#F5F5F5 url(http://static.tumblr.com/rltvkjt/Dnzlmr3zf/pandabear.gif)
no-repeat 5%;
text-align: left;
position: absolute;
z-index: 1000;
box-shadow: inset 0 0 4px #eee, 0 0 4px #ccc;
 text-transform: uppercase;
}
 @font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}

 Beijinhos.

Um comentário: