Estilos de Tooltip

 

Yoo! ^-^ ~

Bem, Como está indo a segunda-feira de vocês? :3 Desculpem por não postar antes, cheguei agora pouco.  

Primeiramente, vocês disseram que queriam o tutorial das cortininhas. Vou postar sim, mas quero que vocês me digam em qual progama querem que eu ensine, Photoshop ou Photofiltre? Me digam nos comentários (:

Bem, uma  coisa que acho um detalhe importante no layout, é o tooltip. Na minha opinião, o tradicional é sem graça. Pensando nisso, trouxe alguns estilos de tooltips prontinhos pra vocês. Se você não sabe o que é tooltip.

Primeiramente você tem que realizar o 1° passo de como colocar o tooltip, que é o JS. Se ainda não fez, é 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji9HR1YWQwwGtrOB_1I87zmI0szBdz9R5w0kYnf4yWHRV-pNT1bZpccA6PmY0Wmgmz76DBO7Hl24mknhcLuG5ZwLFT1VDgZHaRsyQGiiXqgSZGyTj1v5c-svafUycXjnydl-n50J17WQM/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');}

Bem, fiz só 3 pro post não ficar enorme. O código foi feito com base naquele tutorial da kaorii, de tooltip com GIF. Precisando de mais, sabem aonde ir. ^-^