- Cookie Lovers ♥: Tutorial - Tooltip personalizado

21/05/2013

Tutorial - Tooltip personalizado

Troquei meu nome no Blogger, agora eu sou a Anne, me chamem assim u3u

Boa tarde, pessoinhas >3<

Como puderam ver acima, eu troquei o meu nome, é verdade que Anne não tem nada haver com Bia-chan, entretanto eu sempre gostei, e quis usá-lo *u* Mas mudando de assunto, a Bodewig voltou, e ela irá fazer um post mais tarde, então, por enquanto, se contentem comigo u3u

Um anônimo me pediu o tutorial de quando nós passarmos o mouse em cima de algum link, aparecesse uma "caixinha", e com isso, ele estava se referindo ao tooltip. Eu trago um modelo, e como não gosto de reblogar, tentei fazer o meu próprio, porém, vou logo avisando que, não conheço muitos códigos, então usei como base outros modelos que vi por aí, e fui modificando os códigos (www). O preview está com as cores que escolhi, mas você pode modificá-las, porém, com créditos u3u

PREVIEW

(O "Helou", está errado propositalmente e.e)

Primeiro, procure por <head>, e cole abaixo dessa tag:

<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/3173073/GothicDarkness/qTip.js' type='text/JavaScript'/>

Após isso, procure por ]]</b:skin>, e acima disso, cole:

div#qTip {
padding-top: 3px;
padding-left: 12px;
padding-right: 12px;
padding-bottom: 3px;
color: #CORDAFONTE;
border: 1px solid #CORDABORDA;
border-radius: 10px;
display: none;
background: #CORDOFUNDO;
font-family: Pf Arma Five;
font-size: 8px;
text-align: center;
position: absolute;
z-index: 1000;
box-shadow: inset 0 0 4px #CORDASOMBRA, 0 0 4px #CORDASOMBRA;
text-transform: uppercase;
-webkit-transition-duration: .50s;
}
@font-face { font-family: "fonte"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }