Tooltip com Gif

 

Yoo!

A maioria dos blogs usa um tooltip básico, somente personalizado e as vezes com apenas bordas e nada de sombras ou algo assim.

Algo muito fofo de se fazer é inserir um gif, como temos aqui (passe o mouse nos afiliados ou ans autoras se ainda não viu). Postei alguns modelinhos para vocês, claro que podem modificar o gif ou algo assim.

Espero que gostem!

Para saber onde inserir o código (caso ainda não saiba ou não tenha algum tooltip),veja aqui.

- Use o código do modelo que preferir.

div#qTip {

margin:3px;

padding: 8px 22px;

border-right-width: 2px;

border-bottom-width: 2px;

display: none;

color:#000000;

background: #fdfdfd;

font: Tahoma;

font-size: 11px;

background:#fff url(http://i11.photobucket.com/albums/a168/evelynregly/5-4.png)

no-repeat 5%;

text-align: left;

position: absolute;

z-index: 1000;

box-shadow: inset 0 0 4px #eee, 0 0 4px #ccc;

}

div#qTip {

margin:2px;

padding: 7px 20px;

border-right-width: 2px;

border-bottom-width: 2px;

display: none;

color:#78a7c8;

background: #fdfdfd;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

font: Verdana;

font-size: 10px;

background:#fff url(http://i387.photobucket.com/albums/oo314/paravidatoda/mini-200.gif)

no-repeat 5%;

text-align: left;

position: absolute;

z-index: 1000;

box-shadow: inset 0 0 4px #eee, 0 0 4px #ccc;

}

div#qTip {

margin:2px;

padding: 7px 20px;

border-right-width: 2px;

border-bottom-width: 2px;

display: none;

color:#9baf77;

background: #626363;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

font: Verdana;

font-size: 9px;

background:#f5f6f4 url(http://i122.photobucket.com/albums/o260/mhilka/minigifs/iconecome.gif)

no-repeat 5%;

text-align: left;

position: absolute;

z-index: 1000;

box-shadow: inset 0 0 4px #000000;

}