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>

html hover

— Cendre
source

495

Utilisez l' titleattribut, par exemple:

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

Développer l'extrait

ou:

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

Développer l'extrait

— gcochard
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
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
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

8

Vous recherchez une info-bulle

Pour l'infobulle de base, vous voulez:

<div title="This is my tooltip">

Pour une version javascript plus sophistiquée, vous pouvez consulter:

http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632

Le lien ci-dessus vous donne 12 options pour les info-bulles.

— Abk
source