Aggiungi il testo al passaggio del mouse senza JavaScript come se avessimo il mouse sulla reputazione di un utente

262

In StackOverflow, quando passiamo con il mouse sulla reputazione di un utente, vediamo un testo. L'ho visto in molti punti e il codice sorgente mi dice che può essere fatto senza js. E ho provato e ottenuto solo questo-

 <div="text">hover me</div>

html hover

— Cenere
fonte

495

Utilizzare l' titleattributo, ad esempio:

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

Espandi frammento

o:

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

Espandi frammento

— gcochard
fonte

3

è lo stesso di quando passiamo il mouse sulla reputazione di un utente

— Ash,

1

Sì, se guardi il codice sorgente per la reputazione, vedrai che l'attributo title è impostato su reputation score.

— gcochard,

6

@Kevin Questa soluzione è in realtà migliore della soluzione JavaScript poiché funzionerà su browser con JavaScript disabilitato e aggiunge anche un suggerimento agli screen reader sul contenuto dell'elemento.

— gcochard,

1

@KevinMeredith Direi che l'unica misura con cui la soluzione JS sarebbe migliore è che non è possibile modellare il testo che appare e rimanere solo con l'implementazione nativa.

— zero298,

1

@David d C e Freitas: grazie per aver ravvivato StackOverflow con la tua modifica a questa risposta ... non so come taggarti, ma vabbè

— Meredith,

16

L'attributo title funziona bene anche con altri elementi html, ad esempio un link ...

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

— Slavomir
fonte

15

Spesso cerco l'abbreviazione html tag in questa situazione.

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

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

— Harry Bosh
fonte

7

Quell'elemento è specificamente pensato per essere usato per indicare abbreviazioni, quindi questa non è una buona idea. Stai dicendo ai sistemi di sintesi vocale di pronunciarlo come abbreviazione. Utilizzare <span>se si desidera solo un testo al passaggio del mouse.

— Lars Marius Garshol,

8

Stai cercando tooltip

Per la descrizione di base, vuoi:

<div title="This is my tooltip">

Per una versione javascript più elaborata, puoi consultare:

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

Il link sopra ti dà 12 opzioni per i suggerimenti.

— abk
fonte