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>:
<html> <head> </head> <body> <script type="text/javascript" src="wz_tooltip.js"></script> </body> </html>
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:
<html>
<head>
</head>
<body>
<script type="text/javascript" src="wz_tooltip.js"></script>
<a href="https://rafaelcouto.com.br" onmouseover="Tip('Blog do Rafael Couto')" onmouseout="UnTip()">Rafael Couto</a>
</body>
</html>
Simples não? Basta apenas você adicionar:
onmouseover = "Tip('Mensagem')";
onmouseout = "UnTip()";
Então se você quiser exibir a mensagem em uma imagem basta seguir a mesma lógica:
<html>
<head>
</head>
<body>
<script type="text/javascript" src="wz_tooltip.js"></script>
<img src="http://www.google.com.br/intl/pt-BR_br/images/logo.gif" onmouseover="Tip('Logotipo da famosa empresa Google')" onmouseout="UnTip()" />
</body>
</html>
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:
// CONFIGURAÇÃO PADRÃO config. BgColor = '#E2E7FF' // Background colour (HTML colour value, in quotes) // CONFIGURAÇÃO CUSTOMIZADA (FUNDO PRETO) config. BgColor = '#000000' // Background colour (HTML colour value, in quotes)
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
