CSS Tooltips – Mensagem colorida ao passar o mouse

Esse tutorial foi solicitado pela Emily Caroline e eu aprendi no Mundo Blogger e no Grayg.

Sabe quando você arrasta algum o mouse em algum link e aparece uma mensagem colorida, tipo essa do menu lateral do blog? Vou ensiná-los como adicionar este código em seu blog. Toda vez que você usar o atributo ”title’ esse efeito estárá visível.

Esse efeito funciona com jQuery 1.3.2, ele é leve, simples e não entra em conflito com outras bibliotecas jquery que você já tenha ;)

Você terá que colocar a biblioteca jquery que fará este efeito funcionar. Então coloque o código abaixo, acima de .


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'
type='text/javascript'/>
<script language='JavaScript' src='http://yourjavascript.com/1411249631/qTip.js'
type='text/JavaScript'/>

Se a Url http://yourjavascript.com/1411249631/qTip.js do efeito não não funcionar, tente a do desenvolvedor http://qrayg.com/experiment/qtip/qTip.js.

OBSERVAÇÃO: Se você já possui a biblioteca JQuery na versão 1.3.2 em seu blog, NÃO será necessário inserí-la novamente.

Agora procure (ctrl + f) pelo por ]]> e cole o código abaixo, ANTES desse código.


div#qTip {
padding: 3px;
border: 1px solid #666; /* borda */
display: none;
background: #999; /* fundo */
color: #FFF;
font: bold 9px Verdana, Arial, sans-serif;
position: absolute;
z-index: 1000;
}

No código acima, você pode alterar a cor da borda e do fundo como quiser!

Agradeço a amiguinha do Mundo Blogger e o amiguinho do Grayg novamente, pois aprendi através deles para fazer este tutorial.

É isso ;)

Bella Felix

facebooktwitterlinkedin

Cursando Design Gráfico, blogueira, pseudo-escritora, viciada em RPG e animes, desenha e devora livros. Autora dos blogs Pink Skull Design e The Black Element.