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

Faça uma pergunta
À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.




Web site - Verificar, otimizar e limpar seu código HTML
As fontes nas páginas web