Hoje descobri uma ferramenta muito interessante e também de fácil utilização e customização, que mostra uma mensagem ao você passar o mouse em uma imagem, ou até mesmo em um texto.

Clique aqui para fazer dowload do script

Para podermos utilizar o script, antes de mais nada, devemos inseri-lo no corpo do nosso documento, ou seja, entre as tags <body></body>:

Agora podemos já podemos utilizar a ferramenta. Por exemplo, se quisermos exibir a mensagem “Blog do faael webmaster” quando o usuário colocar o mouse em cima do texto faael, fazemos da seguinte maneira:

Simples não? Basta apenas você adicionar:

Então se você quiser exibir a mensagem em uma imagem basta seguir a mesma lógica:

Bom legal, mas eu não gostei da corzinha padrão, e agora? O mais interessante dessa ferramenta é que ela pode ser customizada de acordo com suas preferências, basta você abrir o arquivo wz_tooltip.js e lá ajustar suas preferências, por exemplo, para trocar o fundo basta editar a linha 59:

Além do fundo, tem uma série de configurações que podemos alterar, como as bordas e a fonte. Sabendo um pouco do inglês técnico é possível você configurar sózinho. Caso você precise de mais informações a respeito do script, veja no site oficial a documentação (inglês):

http://www.walterzorn.com/tooltip/tooltip_e.htm#docu

Compartilhe
Share on Facebook2Share on Google+0Tweet about this on TwitterPin on Pinterest0Email this to someone