Javascript: Tooltip

Em: CSS|JavaScript

11 mai 2007

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.

Fonte: Rogério Lino

1 comentário para ‘Javascript: Tooltip‘

Avatar

Sandro Alencar Fernandes

11/05/2007 às 8:28 am

Interessante.
Tenho uma dúvida, em que momento, no código, ele desabilita a forma tradicional de exibir o Title?

Deixe seu comentário

  • Tweets that mention É big.. É big.. - Blog Área Local -- Topsy.com: [...] This post was mentioned on Twitter by Área Local, Cristhian-Xthor. Cristhian-Xthor said: Para [...]
  • Máira: Muito obrigada! Sucesso para nós... que nascemos no mesmo dia né?! Daqui pra cima, sempre! [...]
  • Carlos Antonio: Fala galera! Parabéns pelos 6 anos de vida da Área Local e pelo sucesso da empresa! Grande abra [...]
  • Karina: Parabéns equipe Área Local. Sucesso! Tenho muito orgulho de vocês... [...]
  • Remo: É isso aí pessoal! Parabéns para a galera toda, vamos em frente e que venham mais e mais desafios [...]