Hoje venho trazer um tutorial de Tooltip personalizada, para os que não sabem o que é tooltip, é aquela mensagem que aparece ao passar o mause sabe? então, vamos aprender a personaliza-la!!! Aprendi o tutorial no blog Kawaii World. Go???
1. Procure por </head> e cole acima dele o código a seguir:
<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 procure por ]]</b:skin> e logo acima cole o código da tooltip que lhe agradar mais!
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp4V0oJkOomJe9RD0n4ahxBNpEcAz9o8YSIV_Z1ziFrrPM7bJikBkuV6EA-9YL26aMfS6zM9ErxFnhl78MSyWHxKMWHKXExSphX36ygKA52b0b4QWKvfMqmAPZud7DvzHmdYUe9w2V4U8/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');}
Você pode mudar a parte destacada em negrito, pela URL do mini gif que lhe agradar mais!
Beijokas!!
Muito legais, eu amo o seu blog :D
ResponderExcluirsereifelizz.blogspot.com.br
Onw! Obrigada, bom saber que tenho leitores assim :) bjs
Excluir