Linux, Web, Design e Programação
Posts tagged image
Modo correto de mostrar tooltip em imagens
Oct 3rd
Encontrei este tutorial que aborda o assunto de tooltip em imagens. Ao contrário de que muitos acham, inclusive eu achava, é que o atributo alt incluída dentro da tag img já mostrava como tooltip. Porém o atributo alt tem a semântica de mostrar o texto que lhe foi atribuido em caso da imagem não ser carregada.
Então, o que deve ser feito para mostrar um tooltip em uma imagem? Simples, mantém o atributo alt para que, caso a imagem não seja carregada, mostre o alternate text. E, assim como se faz em links, adicionar o atributo title e atribuir o texto que se deseja como tooltip a esse atributo.
Modo errado de mostrar a tooltip:
<img src="http://imagem.png" alt="Texto mostrado quando a imagem não está disponível" />Modo correto de mostrar a tooltip:
<img title="Texto do tooltip para esta imagem" src="http://imagem.png" alt="Texto mostrado quando a imagem não está disponível" />Lembrando que, isso é somente para navegadores que resolveram esse “problema”.
Fonte: ALT and TITLE.