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>

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>


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>

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


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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.