Agregue texto emergente sin javascript, como lo hacemos con la reputación de un usuario

262

En stackoverflow, cuando pasamos el mouse sobre la reputación de un usuario, vemos un texto. He visto esto en muchos lugares y el código fuente me dice que se puede hacer sin js. Y lo intenté y obtuve solo esto

 <div="text">hover me</div>
html  hover 
— Ceniza
fuente

Respuestas:

495

Use el titleatributo, por ejemplo: 

<div title="them's hoverin' words">hover me</div>
Expandir fragmento

o: 

<span title="them's hoverin' words">hover me</span>
Expandir fragmento

— gcochard
fuente
3
¿es lo mismo como cuando pasemos por la reputación de un usuario
— Ceniza
1
Sí, si observa el código fuente de la reputación, verá que el atributo de título está establecido en reputation score.
— gcochard
66
@Kevin Esta solución es, de hecho, mejor que la solución de JavaScript, ya que funcionará en navegadores con JavaScript deshabilitado, y también agrega una pista a los lectores de pantalla sobre el contenido del elemento.
— gcochard
1
@KevinMeredith Diría que la única medida por la cual la solución JS sería mejor es que no se puede diseñar el texto que aparece y solo se deja la implementación nativa.
— zero298
1
@David d C e Freitas: gracias por alegrar StackOverflow con tu edición de esta respuesta ... no sé cómo etiquetarte realmente, pero bueno
— Meredith
16

El atributo title también funciona bien con otros elementos html, por ejemplo, un enlace ...

<a title="hover text" ng-href="{{getUrl()}}"> download link
</a>
— Slavomir
fuente
15

A menudo busco la abreviatura html tag en esta situación.

<abbr title="Hover">Text</abbr>

https://www.w3schools.com/tags/tag_abbr.asp

— Harry Bosh
fuente
77
Ese elemento está específicamente destinado a usarse para indicar abreviaturas, por lo que no es una buena idea. Le estás diciendo a los sistemas de texto a voz que lo pronuncien como una abreviatura. Úselo <span>si solo desea un texto emergente.
— Lars Marius Garshol
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.