¿Cómo puedo mostrar información sobre herramientas simples en íconos en HTML?

Question

Estoy usando ActiveScaffold en una aplicación Ruby on Rails y, para ahorrar espacio en la tabla, reemplacé el texto predeterminado de "acciones" en la tabla (es decir,"editar", "eliminar", "mostrar") con iconos usando CSS.También agregué un par de acciones personalizadas con action_link.add ("mover" y "copiar").

Para mayor claridad, Me gustaría que apareciera una información sobre herramientas con la acción relacionada. (es decir."editar", "copiar") cuando paso el mouse sobre el ícono.

Pensé que podría hacer esto agregando una definición "alt" simple a la etiqueta, pero parece que eso no funciona.

¿Alguien puede indicarme la dirección correcta?

Answer 1

El alt El atributo se debe utilizar como alternativa a la imagen, en el caso de que falte la imagen, o en un navegador de solo texto.

IE se equivocó cuando hicieron alt aparecer como información sobre herramientas.Nunca estuvo destinado a ser eso.

El atributo correcto para esto es title, que por supuesto no incluye información sobre herramientas en IE.

Entonces, para que aparezca información sobre herramientas tanto en IE como en FireFox/Safari/Chrome/Opera, use ambos alt atributo y un title atributo.

Answer 2

Sólo un pequeño punto que añadir a este hilo...no hay etiqueta alt ni etiqueta de título.El atributo alt es para imágenes, pero todos los demás elementos de una página pueden tener un atributo de título, que es la mejor opción para la compatibilidad entre navegadores.

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

Answer 3

Quieres una etiqueta de "título".No estoy seguro de si esto ya es necesario, pero normalmente agrego etiquetas alt y title para asegurarme de que todos los navegadores muestren la información sobre herramientas de la misma manera.

Answer 4

La propiedad alt de una etiqueta img funciona en algunos navegadores, pero no en todos (como algunos basados ​​en Mozilla).

El "manera correcta"Para hacer esto es utilizar la propiedad del título.

Answer 5

La información sobre herramientas en HTML es el contenido del alt texto para etiquetas de imagen, pero si configura esto usando CSS probablemente tenga un background:url(...); estilo en lugar de una imagen.

Answer 6

Usar alt en las imágenes y title en los enlaces.

Answer 7

Como señaló Prestaul, la etiqueta alt debería funcionar para imágenes y el título para enlaces.Sin embargo, esto también depende del navegador... la mayoría de los navegadores debería implementar una funcionalidad que muestre estos metadatos como información sobre herramientas, pero no es necesario que lo hagan.

Answer 8

Al darme cuenta, como señaló Joel Coehoom, de que mi ícono era en realidad una imagen de fondo, creé una imagen transparente.gif con títulos y atributos alt sobre el fondo, y listo, ¡información sobre herramientas!

Answer 9

buena herramienta aquíhttp://www.guangmingsoft.net/htmlsnapshot/html2image.htm