elyezer.zero

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.