Rodrigo Brito

Utilizando handleEvent para manipular objetos

Para os exemplos será utilizado o conteúdo do projeto. Caso queira o montar em seu ambiente de desenvolvimento, leia o conteúdo do JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático.

A Tooltip é um conteúdo que aparece como uma dica ou uma explicação em um determinado elemento a partir de um evento de mouse (mouseover) relacionado ao contexto do elemento alvo, aparecendo com uma caixa flutuante que desaparece em um evento de saída de mouse (mouseleave).

Neste exemplo o tooltip será realizado no mapa da seção de contato do projeto prático.

Inicialmente, mantendo o padrão de modules, será criado o arquivo tooltip.js já importando e ativando no script.js com o nome de tooltip para a função (opcional).

Para o estilo, será utilizado o mesmo padrão, criando um arquivo modal.css e importando no style.css utilizando @import 'tooltip.css';. Isto garantirá a organização e portabilidade dos módulos.

Tudo organizado! Vamos iniciar!

No html, na div que contém o mapa, será criado um dataset chamado "data-tooltip", sem valor, para servir como alvo para a manipulação do JS. O valor utilizado será o valor do atributo aria-label, que ficará oculto em eventos de mouse mas legível por leitores de tela.

Próximo passo: JS.

Inicialmente é necessário selecionar em uma constante as tooltips (no plural mesmo, pois a implementação servirá para mais de uma caso houver) e será utilizado o dataset, através do método document.querySelectorAll('[data-tooltip]').

Para cada elemento, tooltip, será adicionado um evento de mouse, utilizando o addEventListener e uma função de callback.

A primeira função de callback é a realizado em um evento de mouseover, chamada aqui de onMouseOver. Este evento é o ponto de criação para a tooltip e a partir deste evento, será criado pelo JavaScript uma div com o conteúdo, utilizando o método createElement de Document. Esta div receberá via JS o estilo e o texto do aria-label do elemento selecionado (utilizando o innerText), e será adiconada ao corpo do documento (ao body) através do appendChild. Até este ponto o evento já está "vivo", a div vai ser criada no final da página e o código está da seguinte forma:

O retorno da div será utilizado para a remoção dela, pois, até este ponto, está ocorrendo somente a adição do elemento para cada evento de mouseover. Contudo, vamos aproveitar o momento para personalizar o estilo da tooltip.

Hora de estilizar!

O posicionamento será absoluto, pois terá como referência o ponteiro do mouse, um z-index acima do elemento target, que nesse exemplo é a imagem. As variáveis são as do projeto, contidas no arquivo base.css.

De volta ao JS!

Nesse momento a div está sendo criada no topo da página, devido ao seu posicionamento absoluto, e este (o posicionamento) deverá ser manipulado via JS para ter como referência o a posição do mouse. A posição x (event.pageX) e y (event.pageY) do evento existe no DOM, bem como o objeto de estilo da div (style), permitindo a manipulação do objeto. Os valores x e y serão adicionados as propriedades top e left do estilo da div, sendo acrescidos 20px para sair da posição abaixo do mouse e como esse valor é um número, será concatenado com 'px' na função onMouseOver:

Agora, com a tooltip já adicionada, é preciso adicionar um evento para remover a tooltip em um evento de saída de mouseleave. Então será adicionada um objeto de callback, chamado de onMouseLeave, que terá como um método o handleEvent, que executará a remoção da vi ao evento de saída do mouse. A passagem do objeto como parâmetro de callback permite que o objeto possa ser instanciado fora do escopo da função onMouseOver. A propriedade tooltipBox foi atribuída em tempo de execução, pois o objeto não está congelado (freeze):

Contudo, uma vez que o objeto onMouseLeave é criado, ele permanece como evento no DOM e o ideal é a remoção deste evento após a sua execução. Em sentido opostos ao addEventListener existe o  removeEventListener. O removeEventListener será utilizado dentro do objeto onMouseLeave, tendo como objeto o evento em si:

Fechando o balão!

Agora, para finalizar, o interessante é que a tooltip acompanhe o evento do mouse, então, em um evento de mousemove, será executado um evento tendo como callback um objeto chamado de onMouseMove e este terá novamente um handleEvent. Este objeto receberá o event e atualizará a posição da div. Assim como o onMouseLeave, o evento onMouseMove também deverá ser retirado do DOM, o que será realizado da mesma forma que o primeiro, utilizado o removeEventListener:

Resultado final:

Para visualizar o projeto em andamento, clique aqui.

Para baixar o projeto, clique aqui.