Tooltip: Mensagem ao passar o mouse

|
Olá! :3 Tudo bem com vocês? Desculpem se não respondi os últimos comentários, é que estou gripada, e convenhamos que digitar enquanto você espirra a cada cinco minutos não é muito legal.  Tenho boas notícias, minha internet agora está normal e vou poder fazer um layout free e um sorteio mais pra frente! Mas talvez meu tempo diminua semana que vem, já que vou começar as aulas na auto-escola \o/ -Tô tão feliz, vou poder dirigir *u* Enfim chega de falar da minha, acho que ninguém tá interessado ~.~

O tutorial de hoje foi pedido pelo ask (quase todos que eu posto são), e é de como fazer aquela mensagem colorida que aparece quando passa o mouse em um link ou imagem. O nome disso é tooltip e é não é difícil usá-lo. Veja como fica:

Vamos começar? Vá no seu modelo HTML, e procure por <head>

Cole abaixo de <head> esse código:

Código
<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'/>

Agora aperte Ctrl+F novamente e procure por ]]></b:skin> Para facilitar digite apenas ]]> e dê enter que você irá encontrar o código.

Acima de ]]></b:skin> cole este código:

Código
div#qTip {
padding: 3px; /*Espaço entre a borda e o texto*/
border: 1px solid #666; /* Estilo da borda */
display: none; /*Não mexa*/
background: #999; /* Cor de fundo */
color: #fff; /*Cor da fonte*/
font-family: Verdana; /*Tipo de fonte*/
font-size: 9px; /*Tamanho da fonte*/
position: absolute; /*Não mexa*/
z-index: 1000; /*Não mexa*/}

Agora é só mudar as cores e fontes como você quiser e salvar!

Para o tooltip aparecer, quando colocar um link em algo, utilize esse código:

<a href="link" title="Descrição do link">Texto linkado</a>

Onde está escrito descrição do link, você vai por o texto que quer que apareça quando passar o mouse. O mesmo código pode ser usado em imagens, igual eu fiz na equipe do blog:

<a href="link" title="Descrição da imagem"><img src="link-da-imagem/></a>

Simples não? Espero que tenham gostado! Ah, antes de ir, vocês já viram o clipe novo do Psy? A música não sai mais da minha cabeça! ~Allangga molla ♪


Related Posts Plugin for WordPress, Blogger...