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 ♪


56 comentários

  1. Eu tava preucurando esse efeito to precisando muito de tutoriais

    ResponderExcluir
  2. Muito legal essa tooltip! Muito bonitinha ;33
    - http://caramelises.blogspot.com.br/ // Beijos!

    ResponderExcluir
  3. Adorei, vou usar no próximo layout.
    http://with-you-s2.blogspot.com

    ResponderExcluir
  4. Tooltip é um daqueles detalhes que parece "invisível" mas fica muito lindo personalizado! Parabéns!!

    beeijos millah

    forget-dream.blogspot.com

    ResponderExcluir
  5. Adorei, o que estava no meu blog, não estava funcionando :/
    Ótimo tutorial Liah! Divando como sempre u.u

    Kisses ;*
    ~ The Things Girls // Ajude-me com a meta? (Retribuo)

    ResponderExcluir
  6. oi Liah, adorei o tutorial. Vc explica muito bem os tutoriais. bjs
    quatroestacoes.blog.br
    melhoras pra vc e boa sorte na auto-escola! graças a Deus eu ja tenho minha habilitaçao, eh mto bom dirigir. cuidado hein?! rs bjkassss

    ResponderExcluir
  7. tu que fez o codigo do javascript liah?

    ResponderExcluir
  8. Liah perfeito o tutorial tah de parabens beijos Levi

    www.levigustavodicas.com

    ResponderExcluir
  9. Adorei o tutorial! Esse efeito é muito lindo ^^

    Beijos
    www.garotadeallstar.com.br

    ResponderExcluir
  10. Muito bom o tutorial :3
    ~Kisses
    things-to-html.blogspot.com

    ResponderExcluir
  11. O tooltip é uma graça flor! Eu já tinha visto tutos de tooltips, fica um detalhe muito fofo!
    Fico feliz que sua internet tenha voltado ao normal, que vai ter o layout free e um sorteio õ/
    Quanto á gripe, melhoras viu? É ruim mesmo digitar-espirrar-digitar-espirrar kkkkk.
    Beijos ♥

    Caprichosdabiia.blogspot.com

    ResponderExcluir
  12. Essa tooltip é uma fofura, uma graçinha, tava procurando por esse efeito >.<

    Nyah Kawaii

    ResponderExcluir
  13. Amei o tuto mas não consegui fazer :(
    Tem um game lá no blog participa!

    ResponderExcluir
  14. Eu adoro esse enfeite. Achi tão fofo... E dá um ar mais "suave" ao layout.
    Thing HTML

    ResponderExcluir
  15. Mega dica, fica lindo mesmo!!

    Tem sorteio de uma peça Galaxy Print da Sheinside no meu blog! :)
    xx
    Tali
    nuasecruasblog.wordpress.com

    ResponderExcluir
  16. Fica super fofo usar tooltip u3u Eu vou escutar agora, parece ser bom o3o...

    É viciante! ahsuashsah'

    Beijos ~
    garotas-cupcakes

    ResponderExcluir
  17. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. Tava curiosa pra saber como era ! muito lindo

      the-charming-place.blogspot.com

      Excluir
  18. Uso muito os tutoriais daqui!
    http://modinhamodao.blogspot.com.br/

    ResponderExcluir
  19. Uhuul já estou usando!! Sim, eu coloquei os créditos :3
    The Suspects

    ResponderExcluir
  20. ficaaa lindooo o/
    vou favoritar, pra usar no proximo layout o/
    acervo-de-livros.blogspot.com

    ResponderExcluir
  21. LEGAL, gostei do tuto ;3
    cr4zy-world.blogspot.com

    ResponderExcluir
  22. Legal, acho que vou usar quando eu trocar de layout (que vai demorar um pouquinho). O ruim é que tem que colocar códigos para usar...
    Kissus Liah

    modaetutorial.blogspot.com

    ResponderExcluir
  23. Tinha um tempo sem vir aqui e adorei esse novo layout do Cherry Bomb e adorei o tutorial. Parabéns pelo blog! (:

    http://h-ardcore-girl.blogspot.com/

    ResponderExcluir
  24. Tutorial incrivel, eu estava precisando ! :)
    cupcake bright

    ResponderExcluir
  25. Sorteio e layout free? taí umas palavras que soaram ótimas em meu ouvidos! KK'

    Eu sei como é ficar espirrando a cada 5 minutos digitando, estou gripada também... ._.

    Esse tutorial é massa! eu queria muito saber como fazer esse lindo tooltip, obrigada mais uma vez linda ^.^ ~

    Adolescente Nerd

    ResponderExcluir
  26. adoreiii a novidade q tem no post.. adoreiii
    bju

    http://aieuvivantagem.blogspot.com.br/

    ResponderExcluir
  27. Muito bom, pena que como mudou o HTML do blog eu não consigo mais mudar layout nem nada.
    http://bytheway-foryou.blogspot.com.br/

    ResponderExcluir
  28. Eu estava procurando esse efeito para o meu proximo layout. ESPERO SUA VISITA EM nateeladopc.blogspot.com

    ResponderExcluir
  29. só não funcionou nas minhas imagens ''/
    Mas tá óteeeemo *------------*
    Valeeeu bjs

    to-rosachiclete.blogspot.com

    ResponderExcluir
  30. No meu blogo layout não aparece isso: ]]> :c
    Pode me ajudar?
    http://sonhos-sabor-chocolate.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Aah, finalmente consegui <3 estava procurando esse tutorial faz anos, rs <3

      Excluir
  31. Eu estava procurando esse tutorial a mil séculos!!ajudou muito
    Meu-mundo-alternativo

    ResponderExcluir
  32. Amei o tuto ja estou usando
    to seguindo
    bjos

    ResponderExcluir
  33. Não consigo colocar. não sei mecher nessas coisas. O tutorial foi otimo
    Kisses
    http://kissstrawberryexplosive.blogspot.com.br/

    ResponderExcluir
  34. Ame o tuto... Estou usando, vou seguir..

    Beijinhos!!

    http://meninasadolescentes-porstef.blogspot.com.br/

    ResponderExcluir
  35. muito bom amo esse blog
    http://seututorialmeututorial.blogspot.com.br/

    ResponderExcluir
  36. Muitoo bommm...adoreiii!! Valew por compartilhar com a gente..

    ResponderExcluir
  37. No penúltimo código, no LINK DE DESCRIÇÃO, tem que colocar o que???

    ResponderExcluir
    Respostas
    1. Tem que escrever o texto que vc quer que apareça quando o mouse passar por cima :)!

      i--love---cupcakes.blogspot.com.br/

      Excluir
  38. COMO FAZ PRA ELE APAREÇER ALTUMaTICAMENTE SEM PRESCISAR COLOCAR AKELE ULTIMOS CODIGO DENTRO DO EDITAR HTML DA POSTAGEN ? , eu vejo varios templates q ja vem com tooltips,

    ResponderExcluir
  39. Adorei! Estava precisandodisso *u* Visita?

    http://toolovepandas.blogspot.com.br/

    ResponderExcluir
  40. Mt bom!
    Visite e se puder siga: little-things-foryou.blogspot.com.br

    ResponderExcluir
  41. Adorei ótimo tutorial como sempre *-*
    http://mysweeet-world.blogspot.com.br/

    ResponderExcluir
  42. Consegui ! Beijocas ! :)

    http://mica-tutoriais.blogspot.com.br

    ResponderExcluir
  43. Não consegui fazer a parte de aparecer : ( ,vou continuar tentando!!!!

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...