14.03.2025

Exibindo Texto ao Passar o Mouse sobre uma Imagem em HTML/JS

Resposta Rápida

Para exibir texto quando o cursor passa sobre uma imagem em HTML, você deve usar o atributo title, que é adicionado ao elemento <img>:

<img src="sua-imagem.jpg" alt="Descrição da imagem" title="Texto ao passar o mouse" />

Para criar tooltips personalizados, você deve envolver a tag <img> em um contêiner <div> e usar um <span> para o texto:

<div class="tooltip">
  <img src="sua-imagem.jpg" alt="Descrição da imagem">
  <span class="tooltiptext">Texto personalizado para o tooltip</span>
</div>

Use CSS para estilizar seu tooltip:

.tooltip .tooltiptext {
  visibility: hidden;
  position: absolute;
  background-color: black;
  color: white;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

Controle Dinâmico da Exibição de Texto com JavaScript

JavaScript permite adicionar mais interatividade aos tooltips. Os eventos onmouseover e onmouseout possibilitam o controle dinâmico da exibição de texto:

function mostrarTooltip(elemento, texto) {
    var tooltip = document.createElement('div');
    tooltip.innerHTML = texto;
    tooltip.classList.add('js-tooltiptext');
    document.body.appendChild(tooltip);
    elemento.onmousemove = function(e) {
        tooltip.style.top = (e.pageY + 10) + 'px';
        tooltip.style.left = (e.pageX + 10) + 'px';
    };
}

function esconderTooltip() {
    var tooltips = document.querySelectorAll('.js-tooltiptext');
    tooltips.forEach(function(tooltip) {
        tooltip.remove();
    });
}

Aplique essas funções usando os eventos mouseover e mouseout:

<img src="sua-imagem.jpg" alt="Descrição da imagem" onmouseover="mostrarTooltip(this, 'Texto ao passar o mouse')" onmouseout="esconderTooltip()">

Não esqueça de estilizar os tooltips dinâmicos.

Considerações sobre Acessibilidade e Tooltips

A acessibilidade dos tooltips desempenha um papel fundamental. Algumas tecnologias assistivas podem não reconhecer o atributo title, por isso é recomendado usar aria-label, aria-labelledby ou aria-describedby para criar interfaces acessíveis.

Visualização

Considere este exemplo: ao passar o mouse sobre uma imagem (🖼️), uma legenda (✍️) aparece. Poderia ser assim:

<img src="imagem.png" alt="Imagem" title="✍️ Passe o mouse para ver a legenda!">

Aqui está como funciona: seu cursor (🖱️) encontra a legenda (✍️) enquanto você navega pela página:

Página regular:  🖼️📄💻
Evento de passar o mouse: ✍️📄💻 (A legenda aparece, assim como um detetive encontrando uma pista crucial!)

É simples, envolvente e absolutamente certeiro.

Criando Efeitos de Hover para Dispositivos Touch

Como os dispositivos touch não possuem um cursor, os efeitos de hover precisam ser adaptados. Use toques ou gestos para exibir informações, garantindo uma experiência de usuário confortável em todos os dispositivos:

@media (hover: none) {
    .tooltip:hover .tooltiptext,
    .tooltip:focus-within .tooltiptext {
        visibility: visible; /* Agora seu tooltip está disponível em dispositivos touch */
    }
}

Engaje os Usuários com Tooltips Interativos em Imagens

Tooltips interativos aumentam o engajamento do usuário. Os tooltips podem incorporar não apenas texto, mas também imagens ou botões:

<div class="interactive-tooltip">
  <img src="imagem-interativa.jpg" alt="Imagem interativa">
  <div class="interactive-content"> Explore a nova funcionalidade! <button>Clique para começar!</button></div>
</div>

Para criar uma experiência interativa mais dinâmica, você pode usar transições e animações CSS.

Recursos Úteis

1. title - HTML: Linguagem de Marcação HiperTexto | MDN - Informações básicas sobre o atributo title em elementos HTML.
2. Atributo title Global em HTML - Exemplos de uso do atributo title.
3. CSS Tooltip - Um guia para criar tooltips estilizados e interativos.
4. Introdução ao Posicionamento em CSS – A List Apart - Ajuda na explicação dos conceitos básicos de posicionamento em CSS.
5. WebAIM: Texto Alternativo - Discussão sobre questões de acessibilidade ao usar o atributo title.

Video

Navigation