Ajouter du texte au survol sans javascript comme nous survolons la réputation d'un utilisateur

262

Dans stackoverflow, lorsque nous survolons la réputation d'un utilisateur, nous voyons un texte. J'ai vu cela à de nombreux endroits et le code source me dit que cela peut se faire sans js. Et j'ai essayé et je n'ai eu que ça-

 <div="text">hover me</div>
Cendre
la source

Réponses:

495

Utilisez l' titleattribut, par exemple:

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

ou:

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

gcochard
la source
3
est-ce la même chose que lorsque nous planons sur la réputation d'un utilisateur
Ash
1
Oui, si vous regardez le code source de la réputation, vous verrez que l'attribut title est défini sur reputation score.
gcochard
6
@Kevin Cette solution est en fait meilleure que la solution JavaScript car elle fonctionnera sur les navigateurs avec JavaScript désactivé, et elle ajoute également une indication aux lecteurs d'écran sur le contenu de l'élément.
gcochard
1
@KevinMeredith Je dirais que la seule mesure par laquelle la solution JS serait meilleure est que vous ne pouvez pas styliser le texte qui apparaît et que vous ne restez qu'avec l'implémentation native.
zero298
1
@David d C e Freitas: merci d'avoir éclairci StackOverflow avec votre modification à cette réponse ... je ne sais pas comment vous taguer mais bon
Meredith
16

L'attribut title fonctionne également bien avec d'autres éléments html, par exemple un lien ...

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

Souvent, j'atteins la balise html d'abréviation dans cette situation.

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

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

Harry Bosh
la source
7
Cet élément est spécifiquement destiné à être utilisé pour indiquer des abréviations, donc ce n'est pas une bonne idée. Vous dites aux systèmes de synthèse vocale de le prononcer comme une abréviation. Utilisez <span>si vous voulez juste un texte survolé.
Lars Marius Garshol