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.

Nosso conteúdo é produzido em colaboração com especialistas em tecnologia da informação sob o comando de Jean-François Pillou, fundador do CCM.net. CCM é um site sobre tecnologia líder em nível internacional e está disponível em 11 idiomas.
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.

Assine nossa newsletter!

Assine nossa newsletter!