Modo correto de mostrar tooltip em imagens

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">