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.
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
1) Sobre a borda:
http://www.flashmasters.net/forum/index.php?showtopic=31479
2) Não fecha e atrapalha a busca:
Como o banner não está no site não tem como ver o que está acontecendo
3) Banner por cima:
Use position: absolute; e z-index: 1000; deve resolver.
vlw!!
Olá! Muito bom o script, gostei bastante… só uma duvida:
Tem como deixar essa tooltip junto ao mause quando passa em um link ou imagem?
Igual a esse site: http://www.socwall.com/
Obs: se possivel entrar em contato por e-mail eu agradeço!
Valeu!
Como coloco ToolTip em um elemento Js tipo um menu dinâmico?
Urgente?
Como faço para usar tool tip em imagens? Se possível, me responda no e-mail. Att.
Olá Rogério, gostaria de saber se tem como tirar a url debaixo do title.
Obrigado
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
=@
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?
Ótimo blog. me ajudou bastante esse post.
Parabéns pelo trabalho desenvolvido.
Abraço!
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)!