Javascript: Tooltip
Posted by: Rogério Alencar Lino Filho on: 24 Fevereiro, 2007
- In: CSS| Geral| Javascript| XHTML
- Comment!
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.
9 Respostas para "Javascript: Tooltip"
1 Abril, 2007 às 1:13 am
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!!
8 Junho, 2007 às 7:55 pm
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!
25 Julho, 2007 às 4:17 pm
Como coloco ToolTip em um elemento Js tipo um menu dinâmico?
Urgente?
18 Dezembro, 2007 às 9:19 am
Como faço para usar tool tip em imagens? Se possível, me responda no e-mail. Att.
9 Junho, 2008 às 11:27 am
Olá Rogério, gostaria de saber se tem como tirar a url debaixo do title.
Obrigado
22 Setembro, 2008 às 2:27 pm
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
12 Abril, 2009 às 2:39 pm
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?
31 Março, 2007 às 8:07 pm
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