Sistema de exibição de dicas (tooltips) com javascript

As tooltips são textos que geralmente são exibidos para auxiliar o usuário a preencher um formulário, por exemplo.

É extremamente importante que um sistema de informação contenha informações claras acerca do objetivo traçado. Isso inclui ajudar o usuário a entender partes do sistema que não está familiarizado ou que realmente seja difícil de compreender.

Uma tooltip geralmente segue a estrutura de uma imagem com um ponto de interrogação que quando o mouse passa sobre ela, é exibido um quadro com a dica para preencher determinado campo ou apenas com informações sobre um texto ou algo do tipo.

É esse tipo de tooltip que irei descrever nesse post.

Pré-requisitos: jQuery

O uso da biblioteca jQuery tem o intuito de simplificar, diminuir as linhas de código, mas o mesmo objetivo pode ser conseguido sem muitas alterações para ser utilizado sem jQuery.

Esse é o código JavaScript que faz todo o trabalho:

// Executa a função passada por parâmetro quando a página é carregada

$(document).ready(function() {

// Atribui uma função para o evento onmouseover do elemento imagem

$('div.dica img').mouseover(function(e) {

var el = $('div.dica .texto-dica');

// Atribui ao elemento de texto o valor do atributo alt da imagem, que contém o texto da dica

el.html($(this).attr('alt'));

// Exibe o elemento com o texto

el.show();

// Ajusta com css para que o elemento se localize na posição Y e X do mouse

el.css({

'position':'fixed',

'top':e.pageY,

'left':e.pageX

});

});

// Quando o usuário tirar o mouse da imagem, retira o elemento com o texto

$('div.dica img').mouseout(function(){

var el = $('div.dica .texto-dica');

// Esconde o elemento com texto

el.hide();

});

});

A partir desse código devemos definir a estrutura do código html que exibirá a estrutura:

Você deve utilizar uma imagem para que ao passar o mouse, a dica seja exibida, pode utilizar uma imagem como essa:

<div class="dica"><img src="dica.png" alt="A dica deve ser escrita aqui" /> <div class="texto-dica"></div> </div>

Importante!

A dica deve ser escrita no atributo alt da imagem, para manter o padrão que exige um atributo alt nas tags img.

A formatação dos itens pode ser da forma que achar necessário. Abaixo um exemplo de código css:

.dica { display:inline; } .texto-dica { display:none; background:#FFF; border:1px solid #333; padding:4px; width:200px; text-align:justify; }

Apenas uma propriedade é obrigatória, o display:none no .texto-dica para que o texto não esteja em exibição ao iniciar a página.

A propriedade display:inline na div .dica tem a função de manter a div na mesma linha que está inserindo as informações, por exemplo ao lado de um campo de texto.

Então, por enquanto é isso pessoal, se precisarem de ajuda ou tiverem qualquer dificuldade envie um comentário.