Um pop-up de informação sem Javascript ou CSS

Agosto 2017

Às vezes, pode ser útil exibir informações adicionais na passagem do cursor em uma área da tela, por exemplo, "Clique para aumentar" em uma imagem, a descrição de uma abreviação ou os detalhes sobre um link.

Existem muitas dicas na internet envolvendo o Javascript ou os CSS. Na realidade, existe uma maneira de fazer a mesma coisa com uma simples tag HTML.

Com a tag ACRONYM


Utilize o tag acronym colocando a descrição no título :

Acordos com a <acronym title="Organização do tratado do Atlântico Norte"> OTAN </acronym> foram assinados. 
  • O termo com um pop-up aparece com um sublinhado pontilhado (o que ajuda a distingui-lo de um link)
  • A descrição aparece quando o cursor passa sobre ela.


O que dá:

Com a tag SPAN


Se você quiser obter o mesmo efeito sem o sublinhado (por exemplo, para adicionar a descrição de uma imagem), utilize a tag SPAN. A tag SPAN também pode exibir o pop-up de uma vez, para um conjunto de elementos (imagens, texto, etc.).

Exemplo:
<span title="É o logotipo do CommentÇaMarche"> 
  <img src="http://www.commentcamarche.net/img/commentcamarche.png"> 
  Logotipo do CCM 
</span>


O que dá:


Não se esqueça que a maioria das tags (img, etc.) também aceita o atributo title.

Limites

  • Você não pode escolher a cor do pop-up
  • Não é possível, por este meio, de por texto rico (negrito, itálico, imagens, etc).
  • Se você realmente quiser personalizar o seu pop-up, leia esta dica Pop-up em CSS, sem javascript. Aqui estão alguns exemplos.



Tradução feita por Lucia Maurity y Nouira

Veja também

Artigo original publicado por sebsauvage. Tradução feita por pintuda. Última modificação: 2 de junho de 2011 às 14:05 por pintuda.
Este documento, intitulado 'Um pop-up de informação sem Javascript ou CSS', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.