Javascript: Tooltip

Ver post no novo domínio: http://blog.rogeriolino.com/2007/02/24/javascript-tooltip/

Há algum tempo eu fiz um script de uma tooltip (aquela caixa que abre ao passar o mouse sobre algum link). Infelizmente o código não é dos menores, o que deixaria muito grande o post e sua explicação.

Mas não está difícil de entender. Qualquer dúvida é só deixar um comentário que eu comento logo abaixo explicando.

O seu funcionamento é bem simples. No HTML é adicionado uma div com position absolute com display igual a none. Com o document.onmousemove a posição do mouse é guardada em uma variável então ao passar o mouse sobre qualquer link o display da div (tooltip) muda para block e sua posição (x,y) é setada pela do mouse.

Para ver o exemplo clique aqui.

obs: o código (javascript) está junto com o HTML e o CSS.

11 thoughts on “Javascript: Tooltip

  1. Ricardo D'Avila

    Olá meu karo.. tudo bem!?
    Bom.. pra começar estou escrevendo no post errado hahaha
    mas c eu escrevesse no outro vc naum iria ler certamente..
    Pois bem,quero falar sobre o banner flutuante “apenas flutuante”
    naum espancivel.. ow crescente.
    É o seguinte… estou trabalhando numa loja virtual.. essa q eu coloquei como minha home page.
    E meu patrao pediu pra eu por um banner flutuante..
    Dai bom.. eu fiz a animaçao.. tal.. salvei com o fundo transparente etc ..
    e joguei na index.
    Só que… quando vo passar o mouse pela animação.. aparece uma borda..e após fexar a animação a pagina fica com erros.. por exemplo a busca para de funcionar.. e aparece um “quadrado” do tamanho da animação zul.. e num some mais..
    o site é feito em php.. queria saber como eu faço pra por esse banner no site.. sem zuar nada.Por enquanto eu fiz uma pop up..pra quebrar o galho.. mas meu chefe quér isso urgente..
    Desde já .. muito obrigado..
    Aguardo sua resposta..
    pode adicionar esse e-mail no msn.. apesar de naum ser do hotmail..
    abraços

    Responder
  2. Jaque

    Oi Rogério.
    Muito boa a dica, mas eu tenho uma dúvida.
    Queria passar o mouse sobre uma palavra e aparecer algumas palavras e quem sabe uma imagem. E tipo, tinha que funcionar em qualquer navegador.
    Você tem alguma dica pra me dar?
    Agradeço.

    Se puder, me escreva em jaquemsilva@gmail.com

    Responder
  3. Luis Roberto

    Olá Rogério,

    Preciso muito fazer um tooltip como esse que aparece quando você pede para clicar em “PARA VER O EXEMPLO CLIQUE AQUI”, onde passamos o mouse e podemos clicar nele e arrastar também. Você poderia me dar uma dica de como posso encontrar esse código?

    Responder
  4. Luis Felippe

    Excelente post, realmente ajudou bastante, mas to com um problema o ao executar a function tooltip o form para de submeter.

    Se possível de uma ajudinha (hehehehe)!

    Responder

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s