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

À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.




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 (https://br.ccm.net/) ao utilizar este artigo.
Web site - Verificar, otimizar e limpar seu código HTML
As fontes nas páginas web