25 de mai de 2013

Tooltip: Mensagem ao passar o mouse

Oi Oi Gente :3
O post hoje vai começar bem triste porque a Sofia que era nossa postadora saiu também, então resolvi que vai demorar um pouco para abrir vaga de postadoras porque nunca dá certo isso, sendo assim só vai ficar eu a Kaay.
Enfim, não postei ontem por que não deu e amanhã também não vai dá porque eu tenho um simulado segunda, e tenho que estudar logo hoje e dá só uma revisada amanhã. Gente faltam poucos seguidores para 200 e eu to feliz, porque eu to tentando fazer meu próprio lay, mas tá difícil.
O tutorial que eu trouxe hoje foi retirado do Cherry Bomb (créditos)!

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:


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


Simples não? Espero que tenham gostado!


12 comentários:

  1. Gostei do tutorial, bem legal !

    ResponderExcluir
  2. Sempre me estressava com esse papo de "postadora", porque acho que a gente não pode confiar em todo mundo. Tudo bem que ás vezes ajuda quando não temos tempo, mas tem o bônus e o ônus. Que pena que não vai poder postar :/ Acabei de terminar o layout do meu blog novo e estou com preguiça de mexer no código agora. Até mais. janeiro-janeiro.blogspot.com

    ResponderExcluir
  3. Gostei do tuto, a tooltip fica bem melhor personalizada ^^
    Muito fofo seu blog, adorei aqui :3


    empirecss.blogspot.com ~

    ResponderExcluir
  4. Adorei o tuto! Ja sabia mais foi ótima a explicação!
    http://sorvete-comcaneca.blogspot.com.br/

    ResponderExcluir
  5. Ótimo tutorial, gostei bastante! Que consiga seus seguidores bem rápido tá?
    Desde já, ajudando aqui :33

    Kissus
    Prince Modern

    ResponderExcluir
  6. Adorei o Tutorial, é bem útil !!

    xoxo♥

    Crazy Girl || Clique no meu Perfil para Visitar ~

    ResponderExcluir


- Antes de qualquer coisa, fale um pouco da postagem.
- Não desrespeite ninguém e nem o blog!
- Aceito criticas construtivas.
- NÃO aceito APENAS: Seguindo, segue de volta?