Como posso exibir simples descrições sobre os ícones em html?

StackOverflow https://stackoverflow.com/questions/59221

Pergunta

Eu estou usando ActiveScaffold em Ruby on Rails aplicativo, e para economizar espaço na mesa de eu ter substituído o padrão "ações" texto em tabela (ie."editar", "excluir", "mostrar") com ícones usando CSS.Eu também adicionei um par de acções personalizadas com action_link.adicionar ("mover" e "cópia").

Para maior clareza, Eu gostaria de ter uma dica pop-up com as acções relacionadas com a (ie."editar", "copiar") quando eu passar o mouse sobre o ícone.

Eu pensei que eu poderia fazer isso adicionando um simples "alt" definição para a marca, mas que não aparecem para trabalhar.

Alguém pode me apontar na direção certa?

Foi útil?

Solução

O alt atributo é o de ser utilizado como uma alternativa para a imagem, no caso da imagem em falta, ou em um navegador só de texto.

IE entendi errado, quando eles fizeram alt aparecer como uma dica de ferramenta.Nunca foi concebido para ser isso.

O atributo correto para isso é title, que, naturalmente, não faz uma dica de ferramenta no IE.

Então, tenho uma dica de ferramenta mostra até no IE e FireFox/Safari/Chrome/Opera, use um alt atributo e um title atributo.

Outras dicas

Apenas um ponto de menor importância para acrescentar a este thread...não há nenhuma marca alt ou title tag.O atributo alt é para imagens, mas todos os outros elementos em uma página pode ter um atributo title, que é a melhor escolha para a cruz de compatibilidade do navegador.

<span title="Click here to edit the foo">
  Edit
</span>

Você quer um "título" da marca.Eu não tenho certeza se isso é necessário mais, mas eu costumo adicionar alt e title tags certifique-se de que todos os navegadores exibem a dica de ferramenta o mesmo.

A propriedade alt do tag img funciona em alguns navegadores, mas não em todas (como alguns baseados no mozilla, queridos).

O "caminho certo"para fazer isso é usar o título de propriedade.

Dicas de ferramentas em HTML são o conteúdo do alt texto para as tags de imagem, mas se você estiver definindo esta usando o CSS você provavelmente tem uma background:url(...); estilo em vez de uma imagem.

Utilização alt nas imagens e title nos links.

Como Prestaul apontou, a alt tag deve trabalhar para imagens e o título de links.No entanto, este é também o browser dependente...a maioria dos navegadores deve implementar funcionalidade que apresenta esta metadados como dicas, mas eles não são obrigados a fazê-lo.

Percebendo, como Joel Coehoom apontou, que a minha ícone foi, na verdade, uma imagem de plano de fundo, eu criei um transparent.gif imagem do título e atributos alt mais o plano de fundo, e voila - dicas de ferramentas!

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top