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.
- Um pop-up de informação sem Javascript ou CSS
- Pop up bloqueado - Dicas -Navegadores
- Desativar javascript chrome - Dicas -Chrome
- Tirar sublinhado de link css - Dicas -HTML
- Como desativar o javascript no celular - Dicas -Android
- Div transparente css - Dicas -CSS
Assine nossa newsletter!
